绑定onclick事件

Question

我必须创建的项目是一个带有 if/else 语句的基本计算器。作为 JavaScript 的新手，我正在尝试逐步进行此操作，之前发布此内容只是为了让我入门。基于这些反馈，我重新编写了我的代码，并想检查一下我是否需要做些什么。

您在 JavaScript 中看到的代码是我按照给定说明尝试编写代码的地方：

"...添加代码以将所有输入元素放入名为 inputs 的数组中（使用 document.getElementsByTagName）并使用 for 循环遍历数组。在 for 循环期间，您将使用一个 if 语句跳过不是按钮的输入元素，然后将其他输入元素的 onclick 处理程序设置为在其中调用 calcu 的函数。确保传递 inputs[i].id（或 this.id) 进行计算，以便 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="&divide;">
      </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>

Answer 1

您的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="&divide;">
      </form>
    </div>
  </div>
</body>

</html>

绑定onclick事件

Binding onclick event

javascript

for-loop

if-statement

buttonclick