构建一个简单的计算器答案

【问题标题】：Bulding a simple calculator构建一个简单的计算器
【发布时间】：2018-08-22 17:32:11
【问题描述】：

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

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>

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

【问题讨论】：

我将其更改为 getElmentByClassName("calculator__display") 并将 id 更改为 charchters 仍然无法正常工作
javascript中没有getElmentByClassName。
var value= document.getElementsByClassName("calculator__display");
@loay HTML 评论遵循 而非// comment的形式

标签： javascript html css

【解决方案1】：

您的代码中有一些问题：

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”？

【讨论】：

【解决方案2】：

您的问题是当元素没有 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>

【讨论】：

我把它改成了 document.getElementsByClassName("calculator__display");但它仍然不起作用@Cody Fortenberry
@loay 你实际上还有一些错误。我使用带有更新更改的代码添加了一个代码 sn-p。