使用 if/else 语句的 Javascript 计算器答案

【问题标题】：Javascript Calculator using if/else statements使用 if/else 语句的 Javascript 计算器
【发布时间】：2018-11-04 10:54:53
【问题描述】：

我有一个学校项目要求我使用 if/else 语句构建一个基本的 Javascript 计算器。我对这种语言（以及一般编程）非常陌生，并且在应用我学到的语法以及如何成功解决问题方面遇到了麻烦。

继续代码：正如您将在 HTML 文件中的 cmets 中看到的，所有 javascript 代码都必须在 js 文件中。首先，我需要通过添加代码来绑定 onclick 事件，以将所有输入元素放入一个称为输入的数组（我已经完成），然后使用 for 循环遍历数组（我已经开始）。然后，在 for 循环中，我需要使用 if/else 语句跳过非按钮的输入元素，并将其他输入元素的 onclick 处理程序设置为调用其中的 calcu 变量的函数。这就是我在如何完成这项任务上陷入困境的地方。

我还需要确保将输入[i].id 也传递给计算。当然，我必须使用 if/else 语句来完成 calcu() 函数。

在 js 文件中，我插入了 cmets 以显示我的思考过程和我问自己解决问题的问题。

如果您能给我任何帮助或指导，我将不胜感激。谢谢！

var calcu = function(calcValue) {

  /* "calc.output.value += "1";"" use to output numbers? */

  if (calcValue) {


  }
};

document.getElementById(inputs[i].id).onclick = calcu;
for (var i = 0; i <= inputs[id].length, i++) {
  /* input button elements onlick handler needs to be set to (equal to?) a
       function that calls the calcu variable inside of it */
  if (input.type = button) {

    console.log()

    /* Need input that is not a button to be skipped*/
  } else(input.type != button) {

  }

}

<body>
  <div id="content">
    <div id="calculator-container">
      <!-- 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>

【问题讨论】：

input.type = button 将 input.type 赋值为无论button 是什么（在您的代码中未定义）... 和else(input.type != button) ... 否则不接受参数...你的意思是else if(input.type != button)
你是如何定义称为输入的数组的？
您可以使用 IDE 或在线工具（如 jsfiddle.net）来查找代码中的语法错误，这些错误很多。您可以改为使用 inputs = document.getElementsByTagName("input") 并循环输入。目前您的输入未分配任何值
Kiran，谢谢你，我有点愚蠢，因为我没有考虑使用 getElementsTagName 方法。这有帮助。

标签： javascript if-statement calculator calc

【解决方案1】：

我发现了一些基本错误，例如； or = 如果你想把条件放在 else 部分，那么你也必须使用 else if 条件。您现在需要在 for 循环中正确传递输入值。

var calcu = function(calcValue) {

  if (calcValue) {


  }
}

document.getElementById(inputs[i].id).onclick = calcu;
for (var i = 0; i <= inputs[id].length; i++) 
{
  if (input.type == button) 
  {
     console.log();
  } 
  else if(input.type != button) {

  }

}

这是您的 html 代码。

<body>
  <div id="content">
    <div id="calculator-container">
      <!-- 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>

希望这会对你有所帮助。

【讨论】：

感谢您的帮助。我将摆弄它并修复您到目前为止提到的错误，看看我是否无法提出解决方案。

【解决方案2】：

嗯，我猜这是你们学校的“家庭作业”。

我假设这个计算器应该在加减法之前执行乘法和除法。

如果我是你，我会按以下顺序完成任务：

将用户输入存储到inputs
当用户按下=时，它会迭代inputs并执行计算。
在执行计算时，声明一个临时变量，在每次计算后保持更新值。如果得到指示，您应该在加减法之前执行乘法和除法。
输出计算值

您可能会遇到几个问题：

您需要将用户输入转换为正确的数字。例如3, 5, 1的输入需要转化为351
在迭代inputs 数组时，您需要找到一种在加减法之前执行乘法和除法的正确方法。

编码愉快~

【讨论】：

【解决方案3】：

在 javascript 中使用 if else 条件创建计算器

const operator = ( '/' );

const num1 = 1;
const num2 = 2;

let result;

if (operator == '+') {
    result = num1 + num2;
} else if (operator == '-') {
    result = num1 - num2;
} else if (operator == '*') {
    result = num1 * num2;
} else {
    result = num1 / num2;
}

//console.log(`${num1} ${operator} ${num2} = ${result}`);
console.log(`${num1}${operator}${num2}= ${result}`);

【讨论】：