Problem with identifying elements

Asked

Viewed 33 times

-1

Program structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section onclick = 'clicar()'>
        <div id = 'a1'></div>
        <div id = 'a2'></div>
        <div id = 'a3'></div>
    </section>

<script>
    var a1 = document.getElementById('a1').innerHTML
    var a2 = document.getElementById('a2').innerHTML
    var a3 = document.getElementById('a3').innerHTML

    function clicar(){
           //DÚVIDA
    }
</script>
</body>
</html>

How would I identify within Function 'click()'which Ivs the user would be clicking? ('a1', 'a2', 'A3').

Example:

if (click == 'a1'){
     window.alert('Carro comprado')

}else if (click == 'a2'{
     window.alert('Carro vendido')

}else if (click == 'a3'){
      window.alert('Carro reembolsado')
}

I hope it’s clear.

javascript

1 answer

1


There are three variables that are available for you to use in these HTML declared events, the this, the arguments, and the event.

event contains the object representing the event action, in this case the click. This object has several properties and methods with information about the event, such as which element triggered the event. This property is called target.

As you can see in the example below, just use the property target of event to retrieve the element that triggered the event:

function clicar(event) {
    var target = event.target
    console.log('clicou na div ' + target.id)
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section onclick = 'clicar(event)'>
        <div id = 'a1'>Div 1</div>
        <div id = 'a2'>Div 2</div>
        <div id = 'a3'>Div 3</div>
    </section>
</body>
</html>

But it can also occur the scenario where you have elements nested within this div, and if you click on that internal element, it wouldn’t be the div the element target of the event, target is the element that triggers the event, in which case you would have to use a query to search for the div closest to the element clicked:

function clicar(event) {
    var target = event.target
    var div = target.closest('.div-com-evento')
    console.log('clicou na div ' + div.id)
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <section onclick = 'clicar(event)'>
        <div id = 'a1' class = 'div-com-evento'><span>Div 1</span></div>
        <div id = 'a2' class = 'div-com-evento'><span>Div 2</span></div>
        <div id = 'a3' class = 'div-com-evento'><span>Div 3</span></div>
    </section>
</body>
</html>

  • Do you have any video lesson to recommend me to dig deeper into this subject? (this, Arguments and Events)

  • Video lesson? No have no, I know the documentation of MDN and W3schools.

  • But how would I select that div later? Ex: if (a1 == 'X') I tried to make target.a1 or target.innerHTML.a1 but of Undefined and not the value I put before ('X').

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.