クリック時に特定のノード要素のデータを取得

Question

ユーザーがクリックしているノード要素に応じて特定のデータを取得しようとしています。私はquerySelectorAllコードを使用してターゲット化した4つの要素を持っています。私が達成したいのは、最初の要素をクリックするとconsole.logに特定のデータが表示され、3番目の要素を選択するとそのデータがログに記録されるということです。私はいくつかのことを試しましたが、まだそれを働かせていません。天気をするかは、イベントリスナーリターン機能として使用されていない -

function selectedSplit() { 
 
\t var macroSplits = document.querySelectorAll(".card"); 
 
\t \t console.log(macroSplits[0].childNodes[3].childNodes[1].innerHTML); 
 
}

Answer 1

それはあなたがselectedSplitを使用しているところ不明です。しかし、onClickイベントリスナーを使用すると、必要な情報がリターン関数に渡されます。

あなたがマークアップでこれを実現したい場合は、あなたができる -

<div class='card' onClick="selectedSplit"></div> 

その後、あなたは、単にevent.target

function selectedSplit(event) { 
    var thisCard=event.target; 
    console.log(thisCard.innerHTML); 
} 

Answer 2

event.target経由でアクセスすることができますが、クリックされた要素を持っています

d.onclick = e => console.log(e.target)

<div id=d> 
 
<button><b>b</b></button> 
 
<button><i>i</i></button> 
 
<button><u>u</u></button> 
 
<button><s>s</s></button> 
 
</div>