我试图根据选择标记输入的选择来更改表格元素的文本。
这里是jsFiddle。
<html>
<body>
<table>
<tr>
<td style="text-align: left;">People - 2
<div id="people" class="panel">
<div class="panel-body">
<form method="POST" id="update">
<b>Person - 1</b>
<table class="table table-condensed">
<tbody>
<tr>
<td>
<b>First Name:</b> <input type="text" id="firstName" name="firstName" value="Jonny Boy"> <br>
<b>Last Name:</b> <input type="text" id="lastName" name="lastName" value="Smith"> <br>
</td>
<td>
$<input type="text" id="cost" name="cost" size="3" maxlength="3" value="25">
</td>
</tr>
<tr>
<td><b>Wristband(s):</b>
<select name="wristSelection" class="wristbands">
<option value="No Wrist Bands">No Wrist Bands</option>
<option value="1 X $50">1 X $50</option>
<option value="2 X $50">2 X $50</option>
<option value="3 X $50">3 X $50</option>
<option value="4 X $50" selected="">4 X $50</option>
</select>
</td>
<td>$200.00</td>
</tr>
<tr>
<td><b>Friday Event:</b>
<select id="friday" name="friday">
<option value="Yes" selected="">Yes</option>
<option value="No">No</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><button type="submit" class="btn">Update Person 1</button></td>
</tr>
</tbody>
</table>
</form>
<form method="POST" id="golferUpdate">
<b>Person - 2</b>
<table class="table table-condensed">
<tbody>
<tr>
<td>
<b>First Name:</b> <input type="text" id="firstName" name="firstName" value="William"> <br>
<b>Last Name:</b> <input type="text" id="lastName" name="lastName" value="Jefferson"> <br>
</td>
<td>
$<input type="text" id="cost" name="cost" size="3" maxlength="3" value="150">
</td>
</tr>
<tr>
<td><b>Wristband(s):</b>
<select name="wristSelection" class="wristbands">
<option value="No Wrist Bands">No Wrist Bands</option>
<option value="1 X $50">1 X $50</option>
<option value="2 X $50" selected="">2 X $50</option>
<option value="3 X $50">3 X $50</option>
<option value="4 X $50">4 X $50</option>
</select>
</td>
<td>$100.00</td>
</tr>
<tr>
<td><b>Friday Event:</b>
<select id="friday" name="friday">
<option value="Yes">Yes</option>
<option value="No" selected="">No</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td></td>
<td><button class="btn">Update Person 2</button></td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
</td>
<td>$475.00</td>
</tr>
</table>
<script type="text/javascript">
var wrist = document.getElementsByClassName("wristbands");
var i;
for (i = 0; i < wrist.length; i++) {
wrist[i].addEventListener("change", function() {
var content = this.nextElementSibling;
if (wrist[i].value == "No Wrist Bands") {
content.innerHTML = "$0.00";
} else {
var wristbands = wrist[i].value.split(" ");
var amount = wristbands[2].replace("$", "");
var qty = wristbands[0];
content.innerHTML = "$" + amount * qty + ".00";
}
});
}
</script>
</body>
因此，如上所示，我有一个选择标签来选择要购买的腕带数量。我希望它提高以下td来更新总费用。我下面有JavaScript函数。我正在尝试在更改上添加一个事件侦听器，它将捕获选定一个的值，将其拆分，然后将它们相互加倍以得到总数。我还有另一个类似的js函数，可以执行相同的操作，但单击后即可使用。
我是JS的新手，有点卡住。任何帮助将不胜感激。
答案 0 :(得分：0)
我发现代码有两个问题。
调用'change'回调时，this是<select>标记，没有任何同级标记。我认为您希望<td>与价格。因此，我将其更改为this.parentElement.nextElementSibling，这样它将首先抢占<td>的父项<select>。
在回调内部引用wrist[i]时，for循环已经完成，并且i的值为2，因此在内部使用wrist[i]时在回调中，它实际上是在抢wrist[2]，这当然是未定义的。我将使用event.currentTarget，这是更改事件触发的地方。
for (i = 0; i < wrist.length; i++) {
wrist[i].addEventListener("change", function(_event) {
var content = this.parentElement.nextElementSibling;
var selectTag = _event.currentTarget;
if (selectTag.value == "No Wrist Bands") {
content.innerHTML = "$0.00";
} else {
var wristbands = selectTag.value.split(" ");
var amount = wristbands[2].replace("$", "");
var qty = wristbands[0];
content.innerHTML = "$" + amount * qty + ".00";
}
});
}
答案 1 :(得分：0)
要获取更改后的当前元素，可以向函数添加参数
var wrist = document.getElementsByClassName("wristbands");
for (var i = 0; i < wrist.length; i++) {
wrist[i].addEventListener("change", function(element) {
var content = element.currentTarget.parentNode.nextElementSibling;
if (element.currentTarget.value === "No Wrist Bands") {
content.innerHTML = "$0.00";
} else {
var wristbands = element.currentTarget.value.split(" ");
var amount = wristbands[2].replace("$", "");
var qty = wristbands[0];
content.innerHTML = "$" + amount * qty + ".00";
}
});
}
答案 2 :(得分：0)
我会这样做。你已经很近了。
var wrist = document.querySelectorAll(".wristbands");
wrist.forEach(function(elem) {
elem.addEventListener("change", function(element) {
var content = element.currentTarget.parentNode.nextElementSibling;
if (element.currentTarget.value === "No Wrist Bands") {
content.innerHTML = "$0.00";
} else {
var wristbands = element.currentTarget.value.split(" ");
var amount = wristbands[2].replace("$", "");
var qty = wristbands[0];
content.innerHTML = "$" + amount * qty + ".00";
}
});
});