CODEWITHSUNDEEP
javascripthtmlclickhideaddeventlistener
Gerardo
Gerardo

Reputation: 21

Hide element when you click on it with addEventListener

I want to hide elements of an HTML web when you click on them, using an addEventListener on the elements.

I have this code:

$<!DOCTYPE html>
<html>
<body>    
<h2 id='demo'>ELEMENT 1()</h2>    
  <button id="demo1" style="height:200px;width:200px">ELEMENT 2</button>
   <p id="demo2">ELEMENT 3</p>

<script>
document.getElementById("demo").addEventListener("click", hide);
document.getElementById("demo1").addEventListener("click", hide);
document.getElementById("demo2").addEventListener("click", hide);   

function hide(){
    myFunction();
    timeoutID= window.setTimeout(myFunction,2000);
}
function myFunction() {
    var x = document.getElementById("demo"); /*x should be the element that I clicked, how I could do it?*/
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }    
}    
</script>    
</body>
</html>

I use window.setTimeout after calling myFunction because element should appear again after 2 seconds.

I'm looking for a way to get which element was pressed and pass it as an argument to hide, I tried with "this" but I can't make it work.

Upvotes: 1

Views: 6418

Answers (2)

Shadow1993
Shadow1993

Reputation: 11

Using your code I edited a few bits to make it work for you.

<!DOCTYPE html>
<html>

<body>

  <h2 id='demo'>ELEMENT 1()</h2>


  <button id="demo1" style="height:200px;width:200px">ELEMENT 2</button>

  <p id="demo2">ELEMENT 3</p>

  <script>
    document.getElementById("demo").addEventListener("click", hide);
    document.getElementById("demo1").addEventListener("click", hide);
    document.getElementById("demo2").addEventListener("click", hide);



    function hide(event) {// revealed passed event argument, part of addEventListener
      var x = event.target; //Passed clicked element to variable
      toggleVis(x);
      setTimeout(function() {
        toggleVis(x);// Inserted into annon function to pass x for reveal after
      }, 2000);
    }

    function toggleVis(target) {
      if (target.style.display === "none") {
        target.style.display = "block";
      } else {
        target.style.display = "none";
      }
    }
  </script>

</body>

</html>

The comments should be good, feel free to ask.

TLDR: addEventListener has an event object associated with the function it triggers. You can pass it to your function and extract the target you clicked on, and handle the rest. Hope it helps :)

Upvotes: 1

Barmar
Barmar

Reputation: 781096

The element will be the this value in the listener function. So add a parameter to myFunction() for the element to work on.

document.getElementById("demo").addEventListener("click", hide);
document.getElementById("demo1").addEventListener("click", hide);
document.getElementById("demo2").addEventListener("click", hide);

function hide() {
  myFunction(this);
  timeoutID = window.setTimeout(() => myFunction(this), 2000);
}

function myFunction(x) {
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

}
<h2 id='demo'>ELEMENT 1()</h2>
<button id="demo1" style="height:200px;width:200px">ELEMENT 2</button>

<p id="demo2">ELEMENT 3</p>

Note that I used an arrow function in the setTimeout() call so that this would be preserved.

Upvotes: 1

Related Questions