我对 HTML 和 JavaScript 还很陌生。我有一个表格，我可以在其中单击复选框。JavaScript 函数正在计算选中框的总和，并在 html 文本字段中给出结果。到目前为止，一切都很好。现在我想隐藏代码或不隐藏代码，无论结果低于2还是更高，但我不知道我可以使用哪个值来检查（在脚本和html中）。该函数传递哪个值？怎么称呼？如何在不破坏函数的情况下使 sum 成为全局变量？我的代码：function checkTotal() { var sum = 0; document.listForm.total.value = ''; for (i = 0; i < document.listForm.choice.length; i++) { if (document.listForm.choice[i].checked) { sum = sum + parseInt(document.listForm.choice[i].value); } } document.listForm.total.value = sum;}//alert ("Summe: " + ???);<table> <form name="listForm"> <tr> <td>A</td> <td>Inhalt 1</td> <td><input type="checkbox" name="choice" value="1" onchange="checkTotal()" /></td> </tr> <tr> <td>B</td> <td>Inhalt 2</td> <td rowspan="2" ;> <input type="checkbox" name="choice" value="1" onchange="checkTotal()" /></td> </tr> <tr> <td>Summe:</td> <td><input disabled type="text" size="2" name="total" value="0" /></td> </tr> </form></table>
3 回答
侃侃尔雅
TA贡献1801条经验 获得超15个赞
在您的 javascript 文件中，如果您创建一个名为 called 的变量total并将其放在方法之外，则您可以在每次运行 checkTotal 时更新该值。
所以：
var total;
function checkTotal() {
var sum = 0;
for (i = 0; i < document.listForm.choice.length; i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
total = sum;
}
function getTotal() {
return total;
}
然后在您的 html 中，您可以调用getTotal()，它将返回total设置的任何数字。
米琪卡哇伊
TA贡献1998条经验 获得超6个赞
该函数传递哪个值？
无，您的函数不会返回任何值，因此不会移交任何内容。但是，如果您想返回任何值，可以通过该return语句来实现。
IE：
function checkTotal() {
var sum = 0;
document.listForm.total.value = '';
for (i = 0; i < document.listForm.choice.length; i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
document.listForm.total.value = sum;
return sum;
}
所以当你调用该函数时你可以保存它的返回值
喜欢 ：
var total = checkTotal();
怎么称呼？
目前它是使用事件侦听器属性来调用的。IE。onChange
就像在 javascript 中这样做一样
document.querySelectorAll('input[type="checkbox"]')
.forEach(function(){
this.addEventListener("change", checkTotal)
})
如何在不破坏函数的情况下使 sum 成为全局变量？
您只需var sum = 0;在全局范围内声明函数外部，如下所示
var sum = 0;
function checkTotal() {
sum = 0;
document.listForm.total.value = '';
for (i = 0; i < document.listForm.choice.length; i++) {
if (document.listForm.choice[i].checked) {
sum = sum + parseInt(document.listForm.choice[i].value);
}
}
document.listForm.total.value = sum;
}
javascript 中的任何函数也从其父函数继承作用域，因此在声明函数之前可用的任何内容也可以在函数内部使用（与 php 不同）。
但需要注意的是：使用letand声明的变量const是块作用域的。含义：无法从其直接封闭的外部访问它们{...}
将所有内容放在一起并纠正一些错误
最终代码如下所示。
超文本标记语言
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form name="list-form">
<table>
<tr>
<td>A</td>
<td>Inhalt 1</td>
<td><input type="checkbox" name="Inhalt_1" value="1"></td>
</tr>
<tr>
<td>B</td>
<td>Inhalt 2</td>
<td><input type="checkbox" name="Inhalt_2" value="1"></td>
</tr>
<tr>
<td>Total:</td>
<td colspan="2"><input disabled type="text" id="total" name="total" value="0" /></td>
</tr>
</table>
</form>
<script src="path/to/your/js/file.js" type="text/javascript"></script>
</body>
</html>
JS
var checkboxes = document.forms[0].querySelectorAll('input[type="checkbox"]'),
inpTotal = document.getElementById('total'),
sum = 0;
// first we define the checkTotal
function checkTotal() {
sum = 0;
checkboxes.forEach(el => {
if (el.checked) sum += +el.value;
});
inpTotal.value = sum;
// alert(sum);
}
// then we add the event listeners
checkboxes.forEach(el => el.addEventListener("change", checkTotal));
PS：最好的做法是尽可能将所有 javascript 与 html 放在单独的文件中。
阿波罗的战车
TA贡献1862条经验 获得超6个赞
尝试一下这个。
我知道这有点复杂，但这是很好的做法
我修复了您的非法 HTML 并将内联事件处理程序移至一个 eventListener
我给了表单一个 ID，使用名称已过时且无用
如果您打算提交表单，则需要重命名其中一个复选框，或者如果您在服务器上使用 PHP，则添加到[]名称以创建一个数组
在这里，我重命名了它们，并给了它们一个用于选择器的类
document.getElementById("listForm").addEventListener("input", function() {
let sum = 0;
const checked = [...this.querySelectorAll(".choice:checked")].map(inp => +inp.value); // get all values from checked and convert to number
if (checked.length > 0) sum = checked.reduce((a, b) => a + b); // sum them
console.log(sum)
document.getElementById("total").value = sum; // show value
document.getElementById("showwhen2").classList.toggle("hide", sum < 2); // unhide when >= 2
});
.hide {
display: none;
}
<form id="listForm">
<table>
<tbody>
<tr id="A" +>
<td>A</td>
<td>Inhalt 1</td>
<td><input type="checkbox" class="choice" name="choiceA" value="1" /></td>
</tr>
<tr>
<td id="B">B</td>
<td>Inhalt 2</td>
<td><input type="checkbox" class="choice" name="choiceB" value="1" /></td>
</tr>
<tr>
<td>Summe:</td>
<td><input disabled type="text" size="2" name="total" id="total" value="0" /></td>
</tr>
</tbody>
</table>
</form>
<div id="showwhen2" class="hide">Equal 2</div>
添加回答
举报
0/150
提交
取消