Question

这是我的选择：

<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的第一周，所以请耐心等待。

Answer 1

document.getElementById仅为您选择节点。

您需要设置其html以更改内容，如

document.getElementById('total-meals').innerHTML = 20 //or whatever.

或者您也可以使用Node.textContent之类的

document.getElementById('total-meals').textContent = whatever

Answer 2

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

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

第二次：使用innerHTML属性设置您使用document.getElementById('total-meals')获取的元素的值，因为document.getElementById('total-meals')仅选择ID为{{1}的元素}。您已使用total-meals属性设置值。

第三次：仅使用innerHTML一次，就像我的示例代码段一样。（可选但你应该更清楚编码器和更少的转发器，因为你在学习HTML的第一周），css和javascript :)）

第四：我认为你错过了document.getElementById('total-meals')的最后一个else if条件，如果你没有补充说它不会显示选择 5 BAGS，$ 55

时的反射

quantity == 5：https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

＆＃13;

innerHTML

＆＃13;

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;
  }
}

＆＃13;

如何使用JS根据选定的选项值更新文本

2 个答案: