我试图建立一个计算器使用复选框和简单的javascript，但不是在页面上同时显示多个答案。它一次只显示一个答案，而不是多个当我检查除法时，结果是正确的但是当我选择加法时，结果是不正确的。而且控制台也没有显示其他答案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Building Claculator Using Checkbox</title>
</head>
<body>
<form name="f" id="f1">
<table>
<tr>
<td>Enter Value 1 :</td>
<td><input type="text" name="n1"></td>
</tr>
<tr>
<td>Enter Value 2 :</td>
<td><input type="text" name="n2"></td>
</tr>
<tr>
<td>Choose Any Option :-</td>
<td>
<input type="checkbox" name="v" value="div">Divition(/)<br>
<input type="checkbox" name="v" value="mult">Multiplication(*)<br>
<input type="checkbox" name="v" value="add">Addition(+)<br>
<input type="checkbox" name="v" value="sub">Subtraction(-)
</td>
</tr>
<tr>
<td><input type="button" value="Answer" onclick="show()"></td>
</tr>
<tr>
<td><p id="p1"></p></td>
</tr>
</table>
</form>
<script>
function show(){
let n1 = parseInt(document.f.n1.value);
let n2 = parseInt(document.f.n2.value);
console.log(n1);
console.log(n2);
let val = ''
let msg = "The Answer of "
let call = document.f
for(let i=0;i<call.v.length;i++){
if(document.f.v[i].checked){
val = document.f.v[i].value
console.log(val)
if(val == 'div'){
let ans = n1 / n2
msg += "Division : "
console.log(ans);
document.getElementById('p1').innerHTML += (msg + ans)
}
if(val == 'mul'){
let ans = n1 * n2
msg += "Multiplication : "
console.log(ans)
document.getElementById('p1').innerHTML = (msg + ans)
}
if(val == 'add'){
let ans = n1 + n2
msg += "Addition : "
console.log(ans)
document.getElementById('p1').innerHTML = (msg + ans)
}
if(val == 'sub'){
let ans = n1 - n2
msg += "Subtraction : "
console.log(ans)
document.getElementById('p1').innerHTML = (msg + ans)
}
}
}
}
</script>
</body>
</html>
您可以创建一个全局变量来存储响应，并在函数的每次迭代之后(即在每次乘法之后)向该变量创建一个console.log。
您只需要在其他计算中将输出字符串连接起来。我使用msg变量来存储所有的响应，然后将其输出一次到p1内部html。
您的原始代码连接p1内部html与除法条件(使用+=)的答案，但不连接任何其他条件。
另外，乘法的选项值设置为" multi "而不是"mul"
function show(){
let n1 = parseInt(document.f.n1.value);
let n2 = parseInt(document.f.n2.value);
console.log(n1);
console.log(n2);
let val = ''
let msg = "The Answer of "
let call = document.f
for(let i=0;i<call.v.length;i++){
if(document.f.v[i].checked){
val = document.f.v[i].value
console.log(val)
if(val == 'div'){
let ans = n1 / n2
msg += "Division : " + ans;
console.log(ans);
}
if(val == 'mul'){
let ans = n1 * n2;
msg += "Multiplication : " + ans;
console.log(ans)
}
if(val == 'add'){
let ans = n1 + n2
msg += "Addition : " + ans;
console.log(ans)
}
if(val == 'sub'){
let ans = n1 - n2
msg += "Subtraction : " + ans;
console.log(ans)
}
}
}
document.getElementById('p1').innerHTML = msg;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Building Claculator Using Checkbox</title>
</head>
<body>
<form name="f" id="f1">
<table>
<tr>
<td>Enter Value 1 :</td>
<td><input type="text" name="n1"></td>
</tr>
<tr>
<td>Enter Value 2 :</td>
<td><input type="text" name="n2"></td>
</tr>
<tr>
<td>Choose Any Option :-</td>
<td>
<input type="checkbox" name="v" value="div">Divition(/)<br>
<input type="checkbox" name="v" value="mul">Multiplication(*)<br>
<input type="checkbox" name="v" value="add">Addition(+)<br>
<input type="checkbox" name="v" value="sub">Subtraction(-)
</td>
</tr>
<tr>
<td><input type="button" value="Answer" onclick="show()"></td>
</tr>
<tr>
<td><p id="p1"></p></td>
</tr>
</table>
</form>
</body>
</html>