如何在开关语句中传递按钮 ID 以执行该按钮应该执行的任何功能?



这是一个使用HTML和Javascript的简单计算器,我应该使用switch语句来选择按下相关按钮后要执行的数学运算。我不知道我应该在开关内传递什么。 这是我的代码。

<html>
<head>
<style>
p{
color:white;
background-color:black;
} 
</style>
<script>
function simple_calculator(){
var numl=0;
var num2=0;
var result=0;
num1 = document.getElementById("no1").value;
num2 = document.getElementById("no2").value;
num1 = parseInt(document.getElementById("no2").value);
num1 = parseInt(document.getElementById("no2").value); 
switch(op) {
case 1:
result = num1 + num2;
break;
case 2:             
result = num1 - num2;
break;
case 3:
result = num1 * num2;
break;
case 4:
result = num1 / num2;
break;


document.getElementById("result").innerHTML = result;
default:
}
}
</script>
</head>
<body>
<h3>*- - - Simple Calculator - --*</h3>
<textarea id = "no1"> </textarea>
<textarea id = "no2"> </textarea>
<button id="add" onclick="simple_calculator(1);">Add</button>
<button id="sub" onclick="simple_calculator(2);"> Subsract</button>
<button id="mul" onclick="simple_calculator(3);">Multiply</button>
<button id="div" onclick="simple_calculator(4);">Divide</button>
<p id="result"></p>
</body>
</html>

您需要将值从 onclick 处理程序函数调用传递到函数simple_calculator函数中,因此请尝试以下操作:

function simple_calculator(op) { // op should be an argument
} 

您的simple_calculator应该返回一个函数,因为您在分配为事件处理程序时立即调用它:

function simple_calculator(op){
return function wrap() {
var numl=0;
var num2=0;
var result=0;
num1 = document.getElementById("no1").value;
num2 = document.getElementById("no2").value;
num1 = parseInt(document.getElementById("no2").value);
num1 = parseInt(document.getElementById("no2").value);
switch(op) {
case 1:
result = num1 + num2;
break;
case 2:
result = num1 - num2;
break;
case 3:
result = num1 * num2;
break;
case 4:
result = num1 / num2;
break;
default:
}
document.getElementById("result").innerHTML = result;
}
}

您需要使用onclick="simple_calculator(this.id)"其中这是元素的 id,并且您使用 id 作为开关

function simple_calculator(id) {

var num1 = 0;
var num2 = 0;
var result = 0;
num1 = parseInt(no1.value) || 0;
num2 = parseInt(no2.value) || 0;


switch (id) {
case "add":
result = num1 + num2;
break;
case "sub":
result = num1 - num2;
break;
case "mul":
result = num1 * num2;
break;
case "div":
result = num1 / num2;
break;
}
document.getElementById("result").innerHTML = result;
}
<h3>*- - - Simple Calculator - --*</h3>
<textarea id = "no1" > </textarea>
<textarea id = "no2"> </textarea>
<button id="add" onclick="simple_calculator(this.id)">Add</button>
<button id="sub" onclick="simple_calculator(this.id)">Subsract</button>
<button id="mul" onclick="simple_calculator(this.id)">Multiply</button>
<button id="div" onclick="simple_calculator(this.id)">Divide</button>
<p id="result"></p>

最新更新