Question

我必须创建的项目是一个带if / else语句的基本计算器。作为JavaScript的新手，我试图一步一步地采取这种做法，之前发布这个只是为了让我开始。根据反馈，我重新编写了我的代码，并想检查一下我是否需要处理。

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

＆＃34; ...添加代码以将所有输入元素放入名为inputs的数组中（使用document.getElementsByTagName）并使用for循环迭代数组。在for循环期间，您将使用if语句跳过不是按钮的输入元素，然后设置其他输入元素＆＃39; onclick处理程序到一个函数调用里面的计算器。确保将输入[i] .id（或this.id）传递给calcu，这样计算的内部calcValue变量将具有正确的值。＆＃34;

附加了Jasmine框架并且确实给我一个错误：基本计算器测试站点按钮应该将他们的onclick事件绑定到calcu（this.id）;所以我知道我的代码有错误。我真的很感激任何建议和帮助，你可以给我。谢谢！

＆＃13;

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;
    }
  }

}

＆＃13;

<!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>

＆＃13;

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事件

1 个答案: