时间戳

首页 > 解决方案 > 如何正确地将基本计算器结果链接到按钮？（没有这样做）

javascript - 如何正确地将基本计算器结果链接到按钮？（没有这样做）

问题描述

我是 javascript 新手，这周是我们的第二节课，伴随着作业而来。免责声明：我有学习障碍，很抱歉，如果解决方案真的很明显。

好的，所以在第一节课中，我们必须创建一个带有输入字段的基本计算器，这很好，跟着老师一起，我认为我理解了。- 第二课是让计算器使用按钮代替。

这就是我想出的：

function insert(num) {
  document.form.textview.value = document.form.textview.value + num
}

var result = document.getElementById('result');

result.addEventListener('click', function(number1, number2) {
  var a = number1;
  var b = number2;
  var op = (document.querySelector("#operator").value);
  var calculate;

  if (op == "add") {
    calculate = a + b;
  } else if (op == "min") {
    calculate = a - b;
  } else if (op == "divi") {
    calculate = a / b;
  } else if (op == "mul") {
    calculate = a * b;
  }


});
<form name="form">
  <input type="text" name="textview">
</form>
<div id="operator">
  <br>
  <button onclick="insert(7)">7</button>
  <button onclick="insert(8)">8</button>
  <button onclick="insert(9)">9</button>
  <button onclick="insert('/')" id="divi"> / </button>
  <br>
  <button onclick="insert(4)">4</button>
  <button onclick="insert(5)">5</button>
  <button onclick="insert(6)">6</button>
  <button onclick="insert('*')" id="mul"> * </button>
  <br>
  <button onclick="insert(1)">1</button>
  <button onclick="insert(2)">2</button>
  <button onclick="insert(3)">3</button>
  <button onclick="insert('-')" id="min"> - </button>
  <br>
  <button onclick="insert('C')"> C </button>
  <button onclick="insert(0)"> 0 </button>
  <button onclick="insert('')" id="result"> = </button>
  <button onclick="insert('+')" id="add"> + </button>
</div>

结果：所有按钮都可以工作并输入数字，但似乎与我的功能无关。

首先我检查了控制台日志是否有错误，但它没有给出任何错误。然后我问了我的老师，他说我们只能使用我们在前两节课中学到的东西，所以我试图坚持下去，但真的不知道我在这里做错了什么。非常感谢任何帮助！

标签： javascript

解决方案

这是一个可以解决您的问题的示例代码。正在发生的事情是。

  1. 每当您从键中选择任何内容时，请检查它是否不是使用数字isNaN()

  2. 如果它不是数字，则在插入文本框时在其前后添加一个空格

    document.form.textview.value = document.form.textview.value + ' ' + num + ' ';

  3. 单击结果按钮 (=) 时，获取文本框的值

    var operands = equation.split(' ');

  4. 现在您将拥有一个包含 3 个项目的数组 ( operands)，其中第一个项目作为第一个数字，第二个项目作为操作，第三个项目作为第二个数字。

现在您可以进行相应的操作了。以下是上述解决方案的工作片段。

function insert(num) {
  if (isNaN(num)) {
    document.form.textview.value = document.form.textview.value + ' ' + num + ' '; // add a space after and before the operator
  } else {
    document.form.textview.value = document.form.textview.value + num;
  }

}

var result = document.getElementById('result');

result.addEventListener('click', function() {
  var equation = document.getElementById('equation').value;
  var operands = equation.split(' '); // split the string by space which give you and array of 3 elements
  var op = operands[1];
  var a = operands[0];
  var b = operands[2];
  var calculate;
  if (op == "+") {
    calculate = a + b;
  } else if (op == "-") {
    calculate = a - b;
  } else if (op == "/") {
    calculate = a / b;
  } else if (op == "*") {
    calculate = a * b;
  }

  console.log('Result is: ' + calculate);
});
<form name="form">
  <input type="text" id="equation" name="textview">
</form>
<div id="operator">
  <br>
  <button onclick="insert(7)">7</button>
  <button onclick="insert(8)">8</button>
  <button onclick="insert(9)">9</button>
  <button onclick="insert('/')" id="divi"> / </button>
  <br>
  <button onclick="insert(4)">4</button>
  <button onclick="insert(5)">5</button>
  <button onclick="insert(6)">6</button>
  <button onclick="insert('*')" id="mul"> * </button>
  <br>
  <button onclick="insert(1)">1</button>
  <button onclick="insert(2)">2</button>
  <button onclick="insert(3)">3</button>
  <button onclick="insert('-')" id="min"> - </button>
  <br>
  <button onclick="insert('C')"> C </button>
  <button onclick="insert(0)"> 0 </button>
  <button onclick="insert('')" id="result"> = </button>
  <button onclick="insert('+')" id="add"> + </button>
</div>

阅读更多关于

使用不同的方式可以有更多的解决方案。尝试和探索。祝你学习顺利。

希望这可以帮助 ：）

推荐阅读