stackoom
  简体   繁体   中英

How can I get the clicked div in JavaScript?

 原文  2021-05-17 10:24:08  4   2    javascript/ html/ dom

Question

I'm doing a little whack-a-mole game in JavaScript and I don't know how can I get the div clicked. I explain:

I got this index html:

<!DOCTYPE html>
<html lang="es">
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
</head>
<body>
    <main>
        <div id="top">
            <p class="blue_button" id="points">points</p>
            <p id="beauty_text">Whack-a-mole</p>
            <p class="blue_button" id="lifes">lifes</p>
        </div>
        <div id="meteors">
            <img src="asteroid.png" class="asteroid">
            <img src="asteroid.png" class="asteroid">
            <img src="asteroid.png" class="asteroid">
            <br>
            <img src="asteroid.png" class="asteroid">
            <img src="asteroid.png" class="asteroid">
        </div>
        <div>
            <button class="blue_button" onclick="startGame();">Start</button>
        </div>
    </main>
</body>
</html>

And, this JavaScript (I know I got some problems catching the elements, in the queryselector, etc. But that's not important (for now):

function startGame(){
    //Aquí declaro las variables que voy a usar
    let lifes = document.getElementById('lifes');
    const points = document.getElementById('points');
    lifes.innerHTML = 3;
    points.innerHTML = 0;
    change_asteroid();
}

function change_asteroid(){
    const asteroids = document.querySelectorAll('.asteroid');
    const index  = Math.floor(Math.random() * asteroids.length);
    console.log(index);
    var time = Math.round(Math.random() * (3000, 1000) + 1000)
    asteroids[index].src = "reptilian.png";
    setTimeout(() => {
        asteroids[index].src = "asteroid.png";
        if (lifes == 0) {
            console.log("End");
        }else{
            change_asteroid();   
        }
    }, tiempo);
}

function punch(e){
    console.log(e);
}

let asteroids = document.querySelectorAll('.asteroid');
asteroids.forEach(asteroid => asteroid.addEventListener('click', punch))

For now, everything works okey but the problem is with the punch. I need to catch if the user clicked in reptilian before it changes to asteroid again.

2 answers

solution1
 1  2021-05-17 10:37:11

As you can see in console.log punch work perfectly

 function startGame(){ //Aquí declaro las variables que voy a usar let lifes = document.getElementById('lifes'); const points = document.getElementById('points'); lifes.innerHTML = 3; points.innerHTML = 0; change_asteroid(); } function change_asteroid(){ const asteroids = document.querySelectorAll('.asteroid'); const index = Math.floor(Math.random() * asteroids.length); console.log(index); var time = Math.round(Math.random() * (3000, 1000) + 1000) asteroids[index].src = "https://img1.freepng.es/20180201/irq/kisspng-extraterrestrial-life-display-resolution-alien-5a7325c8251a59.091383891517495752152.jpg"; setTimeout(() => { asteroids[index].src = "https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg"; if (lifes == 0) { console.log("End"); }else{ change_asteroid(); } }, 3000); } function punch(e){ console.log('punched'); } let asteroids = document.querySelectorAll('.asteroid'); asteroids.forEach(asteroid => asteroid.addEventListener('click', punch))
 main{ text-align: center; align-content: center; } #superior p{ display: block; } img{ width: 200px; }
 <main> <div id="top"> <p class="blue_button" id="points">points</p> <p id="beauty_text">Whack-a-mole</p> <p class="blue_button" id="lifes">lifes</p> </div> <div id="meteors"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <br> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> </div> <div> <button class="blue_button" onclick="startGame();">Start</button> </div> </main>

You can use e.target for see which target is "punched" (i add an example alien +1 and asteroid -1 points) 

 function startGame(){ //Aquí declaro las variables que voy a usar let lifes = document.getElementById('lifes'); const points = document.getElementById('points'); lifes.innerHTML = 3; points.innerHTML = 0; change_asteroid(); } function change_asteroid(){ const asteroids = document.querySelectorAll('.asteroid'); const index = Math.floor(Math.random() * asteroids.length); console.log(index); var time = Math.round(Math.random() * (3000, 1000) + 1000) asteroids[index].src = "https://img1.freepng.es/20180201/irq/kisspng-extraterrestrial-life-display-resolution-alien-5a7325c8251a59.091383891517495752152.jpg"; asteroids[index].classList.toggle("asteroid"); setTimeout(() => { asteroids[index].classList.toggle("asteroid"); asteroids[index].src = "https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg"; if (lifes == 0) { console.log("End"); }else{ change_asteroid(); } }, 3000); } function punch(e){ if(e.target.classList.contains('asteroid')){ console.log('asteroid punch -1 points'); }else{ console.log('alien punch +1 points'); } } let asteroids = document.querySelectorAll('.asteroid'); asteroids.forEach(asteroid => asteroid.addEventListener('click', punch))
 main{ text-align: center; align-content: center; } #superior p{ display: block; } img{ width: 200px; }
 <main> <div id="top"> <p class="blue_button" id="points">points</p> <p id="beauty_text">Whack-a-mole</p> <p class="blue_button" id="lifes">lifes</p> </div> <div id="meteors"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <br> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> </div> <div> <button class="blue_button" onclick="startGame();">Start</button> </div> </main>

solution2
 1 ACCPTED  2021-05-17 10:46:12

You can do this by checking the src-attribute of the clicked image (the target of the click event) for the word "alien".

e.target.src.includes('alien')

Working example : 

 function startGame(){ //Aquí declaro las variables que voy a usar let lifes = document.getElementById('lifes'); const points = document.getElementById('points'); lifes.innerHTML = 3; points.innerHTML = 0; change_asteroid(); } function change_asteroid(){ const asteroids = document.querySelectorAll('.asteroid'); const index = Math.floor(Math.random() * asteroids.length); console.log(index); var time = Math.round(Math.random() * (3000, 1000) + 1000) asteroids[index].src = "https://img1.freepng.es/20180201/irq/kisspng-extraterrestrial-life-display-resolution-alien-5a7325c8251a59.091383891517495752152.jpg"; setTimeout(() => { asteroids[index].src = "https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg"; if (lifes == 0) { console.log("End"); }else{ change_asteroid(); } }, 3000); } function punch(e){ var alien = e.target.src.includes('alien'); console.log(alien); const points = document.getElementById('points'); points.innerHTML = parseInt(points.textContent) + 1; } let asteroids = document.querySelectorAll('.asteroid'); asteroids.forEach(asteroid => asteroid.addEventListener('click', punch))
 main{ text-align: center; align-content: center; } #superior p{ display: block; } img{ width: 200px; }
 <main> <div id="top"> <p class="blue_button" id="points">points</p> <p id="beauty_text">Whack-a-mole</p> <p class="blue_button" id="lifes">lifes</p> </div> <div id="meteors"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <br> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> <img src="https://img2.freepng.es/20180205/bdw/kisspng-asteroid-belt-clip-art-asteroid-png-clipart-5a77e944307e54.3628452215178079401986.jpg" class="asteroid"> </div> <div> <button class="blue_button" onclick="startGame();">Start</button> </div> </main>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I get content of div that is clicked How can I get the text that was clicked on in Javascript? How can I get a javascript popup div to display along side every link its clicked from? How can I update a div that is clicked on in my javascript code How to get the div behind the div i clicked How to get div clicked part in javascript? How can I get the indexof image I clicked in this javascript function? how can I get ID in Javascript when in row button clicked javascript - How can I get a div that is inside of a div? How can i replace information on a div with information from an array based on specific button being clicked using JavaScript?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM