我必须创建的项目是带有if / else语句的基本计算器。作为JavaScript的新手，我正在尝试逐步进行此操作，并且之前曾发布过此内容只是为了让我入门。根据这些反馈，我重新编写了代码，并想检查一下是否需要进行处理。
在遵循给定说明的情况下，您尝试在JavaScript中看到的代码是：
“ ...添加代码以将所有输入元素放入名为输入的数组中（使用document.getElementsByTagName），并使用for循环遍历该数组。在for循环中，您将使用if语句跳过输入元素（不是按钮），然后将其他输入元素的onclick处理程序设置为在其中调用calcu的函数。请确保将input [i] .id（或this.id）传递给calcu，以便calcu将具有内部calcValue变量的正确值。”
Jasmine框架已附加，并给我一个错误：基本计算器测试站点按钮应将其onclick事件绑定到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-删除此多余的
ifif (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>