这是我的选择:
<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美元)时,它不会显示反射。innerHTML
:https://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>