这是我的选择:

<div class="quantity-select">
            <select name="quantity" id="quantity">
                <option value="2">2 BAGS, $25</option>
                <option value="3">3 BAGS, $35</option>
                <option value="4">4 BAGS, $45</option>
                <option value="5">5 BAGS, $55</option>
            </select>
        </div>


我要根据选择的选项值更改此信息表:

        <div class="product-info">
            <table>
               <tr>
                 <td><span id="total-meals">10</span> MEALS PER BAG</td>
                 <td><span id="total-nuggs">50</span> TOTAL NUGGS</td>
             </tr>
             <tr>
               <td><span id="chickens-saved">1</span> CHICK SAVED</td>
               <td><span id="calories-saved">420</span> CALORIES SAVED</td>
             </tr>
             <tr>
               <td><span id="water-saved">4</span> GALLONS OF WATER SAVED</td>
               <td>100% MICROWAVABLE</td>
             </tr>
            </table>
        </div>


这是我实现的JavaScript函数,用于根据所选的选项值更改总餐量:

<script type="text/javascript">

    function updateNumbers(){
        var select = document.getElementById("quantity");
        var quantity = select.options[select.selectedIndex].value;
        if (quantity == 2)
        {
           document.getElementById('total-meals') = 20
        }
        else if (quantity == 3)
        {
           document.getElementById('total-meals') = 30
        }
        else if (quantity == 4)
        {
           document.getElementById('total-meals') = 40
        }

    }

</script>


为什么总膳食没有更新-我在做什么错。顺便说一下,这是我学习HTML / CSS / JavaScript的第一周,请耐心等待。

最佳答案

您需要进行如下修改以使其可行。

首先:在select元素上添加一个更改事件,例如onchange="updateNumbers(),这样,当您更改选择选项时,它将自动调用。

第二:使用innerHTML属性设置使用document.getElementById('total-meals')获得的元素的值,因为document.getElementById('total-meals')仅选择ID为total-meals的元素。您已经使用innerHTML属性来设置值。

第三:像我的示例代码片段一样,只使用一次document.getElementById('total-meals')。(可选,但在学习html,css和javascript的第一周,您应该更清晰的编码器和更少的中继器)

第四:我认为您错过了else if的最后一个quantity == 5条件,如果不添加,则当您选择5个BAGS(55美元)时,它不会显示反射。

innerHTMLhttps://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML



function updateNumbers() {
  var select = document.getElementById("quantity");
  var quantity = select.options[select.selectedIndex].value;
  var total_meals = document.getElementById('total-meals');

  if (quantity == 2) {
    total_meals.innerHTML = 20;
  } else if (quantity == 3) {
    total_meals.innerHTML = 30;
  } else if (quantity == 4) {
    total_meals.innerHTML = 40;
  } else if (quantity == 5) {
    total_meals.innerHTML = 50;
  }
}

<!DOCTYPE html>
<html>
<body>
  <div class="quantity-select">
    <select name="quantity" id="quantity" onchange="updateNumbers()">
      <option value="2">2 BAGS, $25</option>
      <option value="3">3 BAGS, $35</option>
      <option value="4">4 BAGS, $45</option>
      <option value="5">5 BAGS, $55</option>
    </select>
  </div>

  <div class="product-info">
    <table>
      <tr>
        <td><span id="total-meals">10</span> MEALS PER BAG</td>
        <td><span id="total-nuggs">50</span> TOTAL NUGGS</td>
      </tr>
      <tr>
        <td><span id="chickens-saved">1</span> CHICK SAVED</td>
        <td><span id="calories-saved">420</span> CALORIES SAVED</td>
      </tr>
      <tr>
        <td><span id="water-saved">4</span> GALLONS OF WATER SAVED</td>
        <td>100% MICROWAVABLE</td>
      </tr>
    </table>
  </div>
</body>
</html>

09-10 10:32
查看更多