Question

我正在构建一个javascript计算器，而且我一直在显示点击键到显示div。

HTML：

function (...) 
.rs.callAs(name, hook, original, ...)
<environment: 0x516d648>

使用Javascript：

<div class="obudowa">
  <div class="inside-body">
    <span class="title">
    Electronic Calculator
  </span>
  <div class="row">
    <div class="display">0</div>
  </div>
  <div class="row">
    <div class="key ac">AC</div>
    <div class="key CE">CE</div>
    <div class="key divide">&divide</div>
    <div class="key multiply">&times</div>
  </div>
  <div class="row">
    <div class="key number seven">7</div>
    <div class="key number eight">8</div>
    <div class="key number nine">9</div>
    <div class="key minus">-</div>
  </div>
  <div class="row">
    <div class="key number four">4</div>
    <div class="key number five">5</div>
    <div class="key number six">6</div>
    <div class="key plus">+</div>
  </div>
  <div class="row">
    <div class="key number one">1</div>
    <div class="key number two">2</div>
    <div class="key number three">3</div>
    <div class="key equal">=</div>
  </div>
  <div class="row">
    <div class="key number zero">0</div>
    <div class="key dot">.</div>
  </div>

  </div>

</div>

所以我想点击calculator.keys并使用calculator.inputting方法将其值添加到calcuator.displayer。我只喜欢使用纯javascript。

Codepen：https://codepen.io/akyjoon/pen/zEgQKr

Answer 1

怎么样？

 var displayer= document.querySelector(".display");
  var numbers= document.querySelectorAll(".number");
  var keys= document.querySelectorAll(".key");
keys.forEach(key=>{
    key.addEventListener("click", function(){
       displayer.innerHTML += key.innerHTML; 
      })
});

Working fiddle

Answer 2

这里有几种解决方案：

使用闭包来保持实际元素，如@jitender
使用function bind将当前元素绑定到函数
使用event.target，它将指向实际元素
...

请阅读Closures以更好地了解原始问题

Answer 3

如果您真的想使用计算器对象，这是另一种解决方案。我建议你在使用＆＃34;这个＆＃34;时也要注意。因为大部分时间都不符合你的期望。

这是对此的一个很好的解释。 https://toddmotto.com/understanding-the-this-keyword-in-javascript/

var calculator = {
  displayer: document.querySelector(".display"),
  numbers: document.querySelectorAll(".number"),
  keys: document.querySelectorAll(".key")
};

calculator.keys.forEach(key => {
    key.addEventListener("click", function(){
       calculator.displayer.innerHTML += key.innerHTML; 
    });
});

Codepen：https://codepen.io/anon/pen/PJMvjd

Answer 4

根据您现有的代码，将inputting代码更改为以下内容：

inputting: function(){
  var displayer = this.displayer;
  for (i=0;i<this.keys.length;i++)
  {
    var key = this.keys[i];   
    key.addEventListener("click", function(){
      displayer.innerHTML += this.innerHTML; 
    })
  }
},

另外，不要忘记在DOM准备好中调用calculator.inputting();。

单击div并在另一个div上显示其值（javascript_

4 个答案: