Javascript、複数のクラスで同じことをするeventlistenerをクリック

Question

私はJavaScriptを学ぶのがとても新しいので、読んでみて似たような答えを探しましたが、すべてがjQueryを指しています。この問題のために。私はかなりjQueryとJSで動作するものを解決できません。

innerHTMLを取得できる関数を設定しましたが、同じクラスに割り当てることはできません。

document.querySelector(".b1").addEventListener("click", writeDisp); 
document.querySelector(".b2").addEventListener("click", writeDisp); 
document.querySelector(".b3").addEventListener("click", writeDisp); 
document.querySelector(".b4").addEventListener("click", writeDisp); 

function writeDisp() { 
    if(dispNum.length < 9){ 
    if(dispNum === "0") { 
     dispNum = this.innerHTML 
    } else { 
     dispNum = dispNum + this.innerHTML}; 
     document.querySelector(".display").textContent = dispNum; 
    } 
    } 
} 

がどのように私はこれをより簡単にすることができます...「は、最初のインスタンスだけ仕事でしょう、と私は複数のクラスを作成しようとしたが、本質的に、彼らは異なる値を持つすべての同じボタンです。可能であれば、もっと多くの.b *クラスを追加する必要があるので、大量のリストを持たない方がいいでしょう。

おかげで、

Answer 1

var class_elem = document.querySelectorAll("button[class^='b']"); 

function writeDisp(){ 
    if(dispNum.length < 9){ 
    if(dispNum === "0"){dispNum = this.innerHTML}else{dispNum = dispNum + this.innerHTML}; 
    document.querySelector(".display").textContent = dispNum; 
    } 
} 

for (var i = 0; i < class_elem.length; i++) { 
    class_elem[i].addEventListener('click', writeDisp, false); 
} 

//Here your code in javascript only. 

Answer 2

あなたはjqueryの使用したくない場合は、この

function writeDisp(){ 
    if(dispNum.length < 9){ 
    if(dispNum === "0"){ 
     dispNum = this.innerHTML 
    } else { 
     dispNum = dispNum + this.innerHTML 
    } 
    document.querySelector(".display").textContent = dispNum; 
    } 
} 

// this line will select all html tags that contains a class 
// name starting with 'b' 
var doms = document.querySelectorAll("[class^=b]"); 

doms.forEach(function(dom) { 
    dom.addEventListener('click', writeDisp); 
}) 

注

querySelectorAllはのみを取得しますように、あなたはネイティブdocument.querySelectorAll APIを使用することができますb*がファーストクラスとして定義されているDOMインスタンスなので、複数のクラス定義の場合最初に目的のクラス名を持たないDOMをフェッチしません。つまり、<div class="a box"></div>のようなDOM定義がある場合、これは無視されます。クラス名の後には、bで始まるクラス名がクラスの後に置かれます。