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

Question

This is my select: 这是我的选择：

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

This my table of information I want to change depending on the option value selected: 我要根据选择的选项值更改此信息表：

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

Here is my JavaScript function that I have implemented to make the total-meals change based on the option value selected: 这是我实现的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>

Why is the total meals not updating - what am I doing wrong. 为什么总膳食没有更新-我在做什么错。 By the way, this is my first week learning HTML/CSS/JavaScript so please bear with me. 顺便说一下，这是我学习HTML / CSS / JavaScript的第一周，请耐心等待。

Answer 1

document.getElementById only selects the node for you. document.getElementById仅为您选择节点。

You need to set its html to change the content like 您需要设置其html来更改内容，例如

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

Or you can also use Node.textContent like 或者您也可以使用Node.textContent类的

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

Answer 2

You need some modifications like below to make it workable. 您需要进行如下修改以使其可行。

First : Add an change event on your select element like this onchange="updateNumbers() so when you change your select option it'll call automatically. 首先：在您的select元素上添加一个更改事件，例如onchange="updateNumbers()这样，当您更改选择选项时，它将自动调用。

Second : Use innerHTML property to set value of the element that you get using document.getElementById('total-meals') because document.getElementById('total-meals') only selects your element with id total-meals . 第二：使用innerHTML属性设置使用document.getElementById('total-meals')获得的元素的值，因为document.getElementById('total-meals')仅选择id为total-meals元素。 You've use innerHTML property to set the values. 您已使用innerHTML属性设置值。

Third : Use document.getElementById('total-meals') only once like my example snippet.(optional but you should be more clear coder and less repeater as you're in the first week of learning html, css and javascript :)) 第三：像我的示例代码片段一样，只使用一次document.getElementById('total-meals') 。（可选，但是在学习html，css和javascript的第一周时，您应该更清晰的编码器和更少的中继器）

Fourth : I think you're missing the last else if condition for the quantity == 5 , if you don't add that it will not show the reflection when you choose 5 BAGS, $55 第四： else if quantity == 5条件quantity == 5 ，我认为您会错过最后一个else if条件，如果您未添加，则当您选择5包，55美元时，它不会显示反射

innerHTML : https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML innerHTML ： https : //developer.mozilla.org/zh-CN/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>

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

问题描述

2 个解决方案

解决方案1
1 2018-05-05 16:30:20

解决方案2
1 已采纳 2018-05-05 16:35:46

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

问题描述

2 个解决方案

解决方案1 1 2018-05-05 16:30:20

解决方案2 1 已采纳 2018-05-05 16:35:46

解决方案1
1 2018-05-05 16:30:20

解决方案2
1 已采纳 2018-05-05 16:35:46