构造一个简单的计算器

时间：2018-08-22 17:32:11

标签： javascript html css3

我正在尝试构建一个简单的计算器。问题是当我按下按钮时，它没有显示在屏幕上。

var loadPage = function() { //using on load on the body of the html
  var one = document.getElementById("1"); //geting the id of the numbers
  one.addEventListener("1", clickListener, false);
  var two = document.getElementById("2");
  two.addEventListener("2", clickListener, false);
  var three = document.getElementById("3");
  three.addEventListener("3", clickListener, false);
  //and so on until 9
};

function clickListener(e) //a click listener for the numbers
{

  var value = document.getElementById("calculator__display");
  if (e.type == "1")
    value.innerHTML = e;
  if (e.type == "2")
    value.innerHTML = e;
  if (e.type == "3")
    value.innerHTML = e;
  //and so on until 9
}
<!doctype html5>
<html>

<head>

  <link rel="stylesheet" href="Calculator.css" />

  <script type="text/javascript" src="Calculator.js"></script>

</head>

<body onload="loadPage()">

  <div class="calculator__display">0</div>

  <div class="operation_keys">
    <button class="key--operator" id="add">+</button>//the operation buttons
    <button class="key--operator" id="subtract">-</button>
    <button class="key--operator" id="multiply">x</button>
    <button class="key--operator" id="divide">÷</button>
  </div>
  <div class="number_keys">//the numbers
    <button id="7">7</button>// 7,8,9
    <button id="8">8</button>
    <button id="9">9</button>
    <button class="key--equal" id="calculate">=</button>//the equal button
    <button id="4">4</button>
    <button id="5">5</button>
    <button id="6">6</button>
    <button id="1">1</button>
    <button id="2">2</button>
    <button id="3">3</button>
    <button id="0">0</button>
    <button id="decimal">.</button>//the decimal point
    <button id="clear">AC</button>//the reset button

  </div>


</body>

</html>

当我单击按钮时，我希望显示该数字。我不明白为什么没有显示该号码。有没有人有任何建议或可以帮助我了解我在做什么错误？

2 个答案:

答案 0 :(得分：4)

您的代码中有几个问题：

  • addEventListener期望的第一个参数是 事件。您应该传递"click"，而不是"1"，"2"等。

  • calculator__display是一个类，而不是一个ID。 document.getElementById("calculator__display");不起作用 除非您向该元素添加ID。

  • e.type是由事件侦听器触发的事件类型，而不是您正在使用的自定义参数 它。

  • ID不能以数字开头（尽管在大多数浏览器中都可以使用）。

我正在使用循环添加事件侦听器。这将删除很多重复的代码。 我向按钮添加了自定义数据属性，用于保存按钮的数值。

希望这将为您提供足够的想法，以便您可以使用计算器的其余部分。

var loadPage = function() {
  var numberKeys = document.getElementsByClassName('number_keys');

  for (let i=0;i<numberKeys.length;i++) {
    numberKeys[i].addEventListener('click', clickListenerNumber, false);
  }
  
  var operationKeys = document.getElementsByClassName('operation_keys');
  
  for (let i=0;i<operationKeys.length;i++) {
    operationKeys[i].addEventListener('click', clickListenerOperation, false);
  }
};

function clickListenerNumber(e) {
  var value = document.getElementById("calculator__display");
  value.innerHTML = e.target.getAttribute('data-value');
}

function clickListenerOperation(e) {
  /* TODO
  * Handle operation button click
  */
}
#calculator__display {
  background: yellow;
}

button {
  display: inline-block;
}
<body onload="loadPage()">

  <div id="calculator__display">0</div>

  <div class="operation_keys">
    <button class="key--operator" id="add">+</button>
    <button class="key--operator" id="subtract">-</button>
    <button class="key--operator" id="multiply">x</button>
    <button class="key--operator" id="divide">÷</button>
  </div>
  <div class="number_keys">
    <button id="seven" data-value="7">7</button>
    <button id="eight" data-value="8">8</button>
    <button id="nine" data-value="9">9</button>
    <button class="key--equal" id="calculate">=</button>
    <button id="four" data-value="4">4</button>
    <button id="five" data-value="5">5</button>
    <button id="six" data-value="6">6</button>
    <button id="one" data-value="1">1</button>
    <button id="two" data-value="2">2</button>
    <button id="three" data-value="3">3</button>
    <button id="zero" data-value="0">0</button>
    <button id="decimal">.</button>
    <button id="clear">AC</button>

  </div>


</body>

此代码没有解决一些明显的问题，例如，您每次单击数字时都要替换显示值。您将如何输入值“ 100”？

答案 1 :(得分：0)

您的问题是，当元素没有ID时，您正在使用“ document.getElementById”。

您需要更改    div class =“ calculator__display”> 0 至    div id =“ calculator__display”> 0

或更改    document.getElementById（“ calculator__display”）; 至    document.getElementsByClassName（“ example”）;

-更新-

除了在上面更改选择器之外，还有另外两个问题。

  • 您的“ addEventListener”函数期望“ click”作为其第一个参数，但您传递的是“ 1”
  • 还在clickListiner函数内部，您正在使用变量e，它是click事件的事件变量。实际上，您实际上需要使用变量“ this”，这是被单击的按钮。 

var loadPage = function() { //using on load on the body of the html
  var one = document.getElementById("1"); //geting the id of the numbers
  one.addEventListener("click", clickListener, false);
  var two = document.getElementById("2");
  two.addEventListener("click", clickListener, false);
  var three = document.getElementById("3");
  three.addEventListener("click", clickListener, false);
  //and so on until 9
};

function clickListener(e) //a click listener for the numbers
{

  var value = document.getElementById("calculator__display");
  if (this.id == "1")
    value.innerHTML = this.textContent || this.innerText;
  if (this.id == "2")
    value.innerHTML = this.textContent || this.innerText;
  if (this.id == "3")
    value.innerHTML = this.textContent || this.innerText;
  //and so on until 9
}
<body onload="loadPage()">

  <div id="calculator__display">0</div>

  <div class="operation_keys">
    <button class="key--operator" id="add">+</button>
    <button class="key--operator" id="subtract">-</button>
    <button class="key--operator" id="multiply">x</button>
    <button class="key--operator" id="divide">÷</button>
  </div>
  <div class="number_keys">
    <button id="7">7</button>
    <button id="8">8</button>
    <button id="9">9</button>
    <button class="key--equal" id="calculate">=</button>
    <button id="4">4</button>
    <button id="5">5</button>
    <button id="6">6</button>
    <button id="1">1</button>
    <button id="2">2</button>
    <button id="3">3</button>
    <button id="0">0</button>
    <button id="decimal">.</button>
    <button id="clear">AC</button>

  </div>


</body>

相关问题
最新问题