クリックしてdiv要素とは別のdiv（javascript_

Question

私はjavascriptの電卓を構築していると私は表示のdivにクリックされたキーを表示するにこだわってその値を示し

HTML：。

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

Javascriptを：

var calculator = { 
    displayer: document.querySelector(".display"), 
    numbers: document.querySelectorAll(".number"), 
    keys: document.querySelectorAll(".key"), 
    inputting: function(){ 
    for (var key in this.keys) { 
     key.addEventListener("click", function(){ 
     this.displayer.innerHTML += key.innerHTML; 
     }) 
    } 
    }, 
} 

だから私はcalculator.inputtingメソッドを使用してcalcuator.displayerするcalculator.keysをクリックすると、その値を追加したい。私はそれが純粋なJavaScriptを使用してのみ実行したいと思います。

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

Answer 1

、次のように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();を呼び出すことを忘れないでください。

Answer 2

何

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 3

についてのいくつかの解決策はここに可能です：

• は使用閉鎖を@jitenderにより示唆されるように、実際の要素を維持する
• 0実際の要素
• を指します
• 使用event.targetを機能するように現在の要素を結合させる...

これはあなたの別の解決策は約Closuresは、より良いあなたの元の問題を理解するために

Answer 4

をお読みください実際に電卓オブジェクトを使用したい場合に使用できます。ほとんどの時代はあなたが期待しているものを保持していないので、「この」を使うときには注意を払うことをお勧めします。

ここではこれについて説明します。 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