javascript - 仅使用数据量选择元素

Question

我正在尝试对老师的 HTML、CSS 和 JavaScript 代码进行逆向工程，但遇到了错误。我应该仅使用特定的数据量来选择一个元素。

function countAmount() {
  var smor = 100;
  var socker = 2.5;
  var agg = 2;
  var mjol = 1;
  var kakao = 3;
  var vaniljsocker = 1;

  var sel = document.getElementById("qtySelect");

  if (sel.value == 1) {}
}

<h2>Ingredienser</h2>
<label>Antal kladdkakor</label>
<!-- Label hör alltid ihop med ett någon typ av input-fält, så som select-->
<select id="qtySelect" onchange="countAmount()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>

</select>
<table class="table">
  <thead class="thead-dark">
    <!-- överskriften i tabbellen-->
    <tr>
      <!-- första raden i tabelllen-->
      <th>Mängd</th>
      <!-- th är kolumnen i tabell-headen-->
      <th>Enhet</th>
      <th>Råvara</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- andra raden i tabelllen-->
      <td class="amount" data-amount="100">100</td>
      <!-- td är kolumnen i tabell-body-->
      <td>g</td>
      <td>Smör</td>
    </tr>
    <tr>
      <!-- tredje raden i tabelllen-->
      <td class="amount" data-amount="2.5">2,5</td>
      <td>dl</td>
      <td>Strösocker</td>
    </tr>
    <tr>
      <!-- fjärde raden i tabelllen-->
      <td class="amount" data-amount="2">2</td>
      <td>st</td>
      <td>Ägg</td>
    </tr>
    <tr>
      <!-- femte raden i tabelllen-->
      <td class="amount" data-amount="1">1</td>
      <td>dl</td>
      <td>Vetemjöl</td>
    </tr>
    <tr>
      <!-- sjätte raden i tabelllen-->
      <td class="amount" data-amount="3">3</td>
      <td>msk</td>
      <td>Kakao</td>
    </tr>
    <tr>
      <!-- sjunde raden i tabelllen-->
      <td class="amount" data-amount="1">1</td>
      <td>tsk</td>
      <td>Vaniljsocker</td>
    </tr>
  </tbody>
</table>

请记住，我不允许更改任何 HTML 代码，而且我的 javascript 代码非常空。

谢谢!

**

感谢您的帮助，并对我有点“模糊”的问题表示歉意!

**

Answer 1

您可以使用querySelector像这样

var el = document.querySelector("td[data-amount ='100']");

上面将选择 data-amount = 100 的 td。

function countAmount() {
  var smor = 100;
  var socker = 2.5;
  var agg = 2;
  var mjol = 1;
  var kakao = 3;
  var vaniljsocker = 1;
  
  var el = document.querySelector("td[data-amount ='100']");

console.log(el);
  
}

<h2>Ingredienser</h2>
<label>Antal kladdkakor</label>
<!-- Label hör alltid ihop med ett någon typ av input-fält, så som select-->
<select id="qtySelect" onchange="countAmount()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>

</select>
<table class="table">
  <thead class="thead-dark">
    <!-- överskriften i tabbellen-->
    <tr>
      <!-- första raden i tabelllen-->
      <th>Mängd</th>
      <!-- th är kolumnen i tabell-headen-->
      <th>Enhet</th>
      <th>Råvara</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <!-- andra raden i tabelllen-->
      <td class="amount" data-amount="100">100</td>
      <!-- td är kolumnen i tabell-body-->
      <td>g</td>
      <td>Smör</td>
    </tr>
    <tr>
      <!-- tredje raden i tabelllen-->
      <td class="amount" data-amount="2.5">2,5</td>
      <td>dl</td>
      <td>Strösocker</td>
    </tr>
    <tr>
      <!-- fjärde raden i tabelllen-->
      <td class="amount" data-amount="2">2</td>
      <td>st</td>
      <td>Ägg</td>
    </tr>
    <tr>
      <!-- femte raden i tabelllen-->
      <td class="amount" data-amount="1">1</td>
      <td>dl</td>
      <td>Vetemjöl</td>
    </tr>
    <tr>
      <!-- sjätte raden i tabelllen-->
      <td class="amount" data-amount="3">3</td>
      <td>msk</td>
      <td>Kakao</td>
    </tr>
    <tr>
      <!-- sjunde raden i tabelllen-->
      <td class="amount" data-amount="1">1</td>
      <td>tsk</td>
      <td>Vaniljsocker</td>
    </tr>
  </tbody>
</table>