JS：特定のクラス名を持つ要素の内部HTMLを取得できません

Question

私は自分のスキルを操作するためにJavaScriptから電卓を作成しようとしています。私は数字のあるすべてのボタンにクラスnumを追加しました。

私はこのコードでそれらをクリックすると、コンソールにこれらのボタンのinnerHTMLを表示するように表示しようとしている：

var num = document.getElementsByClassName('num'); 
num.addEventListener('click', getNum); 

function getNum(){ 
    console.log(num.innerHTML); 
} 

getNum(); 

しかし私が得るすべてはnum.addEventListenerがある

です関数ではありません。私が間違って何をやっている可能性がhttps://codepen.io/teenicarus/pen/wrEzwd

：ここ

は私codepenのですか？

Answer 1

は、ここでは、あなたのcodepenに直接差し込むことができるソリューションです。

var nums = document.getElementsByClassName('num'); 
[].forEach.call(nums, num => num.addEventListener('click', numClick)); 

function numClick(){ 
    // adding + turns the text into an actual number 
    console.log(+this.innerHTML); 
} 

getElementsByClassName()は、私が上記示したように、あなたが[].forEach.call()にそれを渡すことができ、それを反復し、HTMLCollectionを返します。

また、番号を取得しないため、ハンドラの名前をnumClickに変更しました。そして、ここで"1" + "2" => "12"

Answer 2

以下のようにコードを変更する必要があります。 getElementsByClassNameは要素のコレクションを返します。要素をループし、clickイベントリスナーを追加します。 getNumでは、thisを使用して、クリックされたボタンにアクセスできます。

var num = document.getElementsByClassName('num'); 

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

function getNum(){ 
    console.log(this.innerHTML); 
} 

また、次のようなArray forEachを使用することができます。

[].forEach.call(num, function(el){ 
    el.addEventListener('click', getNum); 
}) 

Answer 3

getElementsByClassNameは、要素のコレクションではなく、単一の要素を返します。単一の要素を取得する場合は、id属性を割り当て、getElementByIdを使用します。このようにしてaddEventListener関数を使用することができます

Answer 4

あなたはあなたの質問にJqueryをタグ付けしたので、Jqueryも使用できると思います。あなたはクリックされた要素のクラスをつかみ、 'this''とそれを参照してそのテキストを得ることができます。

$('.num').click(function(){ 
     var x = $(this).text(); 
     console.log(x); 
    }); 

これは、あなたがにconsole.log DEMO

Answer 5

.getElementsByClassName戻っていない要素が、それらのコレクションをチェックすることができる実施例です。 .getElementsByClassName(num)[element's sequential number]を使用して要素にアクセスしたり、idとgetElementByIdメソッドを使用したりすることができます。

Answer 6

のような数にテキストを有効にする素敵なショートカットが（そうでない場合は、2つの数値を追加すると、予期しない結果をもたらすであろう、ご希望の出力のために変更されたコードされており、+を追加しました。コピーして試してみてください：

var num = document.getElementsByClassName('num'); 
//num.addEventListener('click', getNum); 
for (var i = 0; i < num.length; i++) { 
    num[i].addEventListener('click', getNum); 
} 
function getNum(){ 

    document.getElementById('result').innerHTML+=this.innerHTML; 
    console.log('value:'+this.innerHTML); 
} 

//getNum();