我必须创建的项目是一个带有 if/else 语句的基本计算器。作为 JavaScript 的新手，我正在尝试一步一步地执行此操作，并且之前发布过此内容只是为了让我开始。根据这些反馈，我重新编写了代码，并想检查一下是否需要进行哪些工作。
您在 JavaScript 中看到的代码是我按照给定的说明尝试编码的地方:
“...添加代码以将所有输入元素放入名为inputs的数组中(使用document.getElementsByTagName)并使用for循环迭代该数组。在for循环期间，您将使用if语句来跳过不是按钮的 input 元素，然后将其他 input 元素的 onclick 处理程序设置为在其中调用 calcu 的函数。确保将 input[i].id (或 this.id)传递给 calcu，以便计算其内部 calcValue 变量将具有正确的值。”
Jasmine 框架已附加，但确实给了我一个错误:基本计算器测试站点按钮应该将其 onclick 事件绑定(bind)到 calcu(this.id)；所以我知道我的代码有错误。我非常感谢您能给我的任何建议和帮助。谢谢!
var calcu = function(calcValue) {
/* "calc.output.value += "1";"" use to output numbers? */
if (calcValue) {
}
};
var inputs = new Array(document.getElementsByTagName('input'));
for (var i = 0; i <= inputs.length, i++) {
if (inputs[i].type == "button") {
document.getElementById(input.id).onclick = function() {
console.log(calcu(this.id));
}
if (inputs[i].type !== "button") {
return;
}
}
}<!DOCTYPE html>
<html>
<head>
<!-- test framework css -->
<link rel="stylesheet" href="js/test/lib/jasmine-2.1.3/jasmine.css">
<!-- test framework javascript -->
<script src="js/test/lib/jasmine-2.1.3/jasmine.js"></script>
<script src="js/test/lib/jasmine-2.1.3/jasmine-html.js"></script>
<script src="js/test/lib/jasmine-2.1.3/boot.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>A Basic Calculator (If-Else)</title>
<meta name="description" content="A Basic Calculator">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/main.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="content">
<div id="calculator-container">
<!-- The name of the form is "calc" -->
<!-- DO NOT CHANGE THE FORM! Only use external JavaScript files -->
<form name="calc">
<label for="output">A Basic Calculator</label>
<!-- the name of the textbox is "output" -->
<input id="output" name="output" type="text" readonly>
<br>
<input type="button" id="1" value=" 1 ">
<input type="button" id="2" value=" 2 ">
<input type="button" id="3" value=" 3 ">
<input type="button" id="+" value=" + ">
<br>
<input type="button" id="4" value=" 4 ">
<input type="button" id="5" value=" 5 ">
<input type="button" id="6" value=" 6 ">
<input type="button" id="-" value=" - ">
<br>
<input type="button" id="7" value=" 7 ">
<input type="button" id="8" value=" 8 ">
<input type="button" id="9" value=" 9 ">
<input type="button" id="*" value=" x ">
<br>
<input type="button" id="c" value=" C ">
<input type="button" id="0" value=" 0 ">
<input type="button" id="equate" value=" = ">
<input type="button" id="/" value="÷">
</form>
</div>
</div>
<!-- source files -->
<script src="js/vendor/math.js"></script>
<script src="js/ifelse.js"></script>
<script src="js/test/ifelseSpec.js"></script>
</body>
</html>最佳答案
您的 js 代码有这些问题
1- 将 , 转换为 ;
for (var i = 0; i < inputs.length; i++) {
2-删除这个额外的if
if (inputs[i].type !== "button") {
return;
}
3-将input更改为inputs[i]
document.getElementById(inputs[i].id).onclick
4- 以此代替获取元素的 ID
ev.target.id
添加事件监听器的一部分
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "button") {
document.getElementById(inputs[i].id).onclick = function(ev) {
console.log(calcu(ev.target.id));
};
}
}
完整代码在这里。只需完成您的calcu函数
var calcu = function(calcValue) {
/* "calc.output.value += "1";"" use to output numbers? */
if (calcValue) {}
};
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].type == "button") {
document.getElementById(inputs[i].id).onclick = function(ev) {
console.log(calcu(ev.target.id));
};
}
}<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>A Basic Calculator (If-Else)</title>
<meta name="description" content="A Basic Calculator">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="content">
<div id="calculator-container">
<!-- The name of the form is "calc" -->
<!-- DO NOT CHANGE THE FORM! Only use external JavaScript files -->
<form name="calc">
<label for="output">A Basic Calculator</label>
<!-- the name of the textbox is "output" -->
<input id="output" name="output" type="text" readonly>
<br>
<input type="button" id="1" value=" 1 ">
<input type="button" id="2" value=" 2 ">
<input type="button" id="3" value=" 3 ">
<input type="button" id="+" value=" + ">
<br>
<input type="button" id="4" value=" 4 ">
<input type="button" id="5" value=" 5 ">
<input type="button" id="6" value=" 6 ">
<input type="button" id="-" value=" - ">
<br>
<input type="button" id="7" value=" 7 ">
<input type="button" id="8" value=" 8 ">
<input type="button" id="9" value=" 9 ">
<input type="button" id="*" value=" x ">
<br>
<input type="button" id="c" value=" C ">
<input type="button" id="0" value=" 0 ">
<input type="button" id="equate" value=" = ">
<input type="button" id="/" value="÷">
</form>
</div>
</div>
</body>
</html>关于javascript - 绑定(bind)onclick事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50539680/