When clicking on one of the tags with the same class as javascript, how to access the clicked one? I tried by clicking, I looked at the problems, but unfortunately I could not solve the problem, it is very important for me, thanks in advance. Kind regards

HTML:

<div >
                                <div >
                                    <div >
                                        <img src="https://cdn.dsmcdn.com/ty100/product/media/images/20210408/17/78753423/161972772/0/0_org_zoom.jpg">
                                        <h2>BTC</h2>
                                    </div>
                                    <div >
                                        <i ></i>
                                    </div>
                                </div>
                                <div >
                                    <div >
                                        <div >
                                            <img src="https://cdn.iconscout.com/icon/free/png-256/ethereum-2296075-1912034.png">
                                            <h2>ETH</h2>
                                        </div>
                                    </div>  
                                    <div >
                                        <div >
                                            <img src="https://cryptologos.cc/logos/thumbs/bnb.png?v=022">
                                            <h2>BNB</h2>
                                        </div>
                                    </div>
                                    <div >
                                        <div >
                                            <img src="https://cryptologos.cc/logos/thumbs/shiba-inu.png?v=022">
                                            <h2>SHIBA</h2>
                                        </div>
                                    </div>  
                                    <div >
                                        <div >
                                            <img src="https://cryptologos.cc/logos/thumbs/decentraland.png?v=022">
                                            <h2>DTC</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>

JS:

let moneySelect = document.querySelector(".money-select");
let moneyList = moneySelect.querySelector(".money-check");
let moneyValue = moneyList.querySelector("h1");
let input = document.getElementById("htmlinamk");

for (var i = 0; i < moneyList.length; i  ) {
    moneyList[i].addEventListener("click", function () {
        a = moneyValue.innerText;
        input.value = a;
    });
}

Sorry for my bad english

CodePudding user response：

The event listener function receives the event object, which has a target property that would point to the div element with class money-check. You could then traverse the DOM tree and get down to child of child and extract the inner text from the header tag. Something like this:

moneyList[i].addEventListener("click", (event) => {
 const innerText = event.target.child<traverse here>.innerText;
 input.value = innerText;
});

CodePudding user response：

There are 2 ways to get the element that was clicked. this, or event.target. Either of the techniques will work for this example:

moneyList[i].addEventListener("click", function (e) {
    let a = this.querySelector('H2').innerText;
    // let a = e.target.querySelector('H2').innerText;
    input.value = a;
});