Problems with javascript event handler

Question

I'm hoping this doesn't get marked as "duplicate", because I have reviewed several threads and followed the advice I found. I know I'm missing something simple, and need other eyes on this. I'm a newbie, so please bear with me. I am testing a simple button element that I have a click event handler on, but it is not working. It works inline with "onclick", but I am trying to avoid that. The simple html:

<div>
    <button id='handler'>Event</button>
</div>
<div id='stringText'>
    <h4>Some Description</h4>
    <p>
        Some more information
    </p>
</div>

And the javascript:

<script>
    document.getElementById("handler").addEventListener("click", display, true);
    function display() {

        if (document.getElementById("stringText").style.display === "block") {
            document.getElementById("stringText").style.display = "none";
        } else {
            document.getElementById("stringText").style.display = "block";
        }

    };

</script>

I have the css that initially sets the "stringText" display as "none". I appreciate any assistance.

Mixing CSS and the style prop is funny business. Read this answer: stackoverflow.com/a/49289840/3662110 — jmargolisvt
– jmargolisvt, Commented Mar 27, 2018 at 2:31
This was a good read, and makes sense. I will correct the practice going forward, thank you! — Pops Jones
– Pops Jones, Commented Mar 27, 2018 at 3:04

Ele · Accepted Answer · 2018-03-27 02:39:35Z

4

Probably your problem is related to the execution of that script while the document is being loaded.
Add this condition stringText.style.display === "" to show/hide the elements correctly.

An alternative is using the event DOMContentLoaded

document.addEventListener("DOMContentLoaded", function(event) {
  console.log("DOM fully loaded and parsed");
  document.getElementById("handler").addEventListener("click", display, true);

  function display() {
    var stringText = document.getElementById("stringText");
    if (stringText.style.display === "block" || stringText.style.display === "") {
      stringText.style.display = "none";
    } else {
      stringText.style.display = "block";
    }
  };
});

<div>
  <button id='handler'>Event</button>
</div>
<div id='stringText'>
  <h4>Some Description</h4>
  <p>
    Some more information
  </p>
</div>

edited Mar 27, 2018 at 2:39

answered Mar 27, 2018 at 2:32

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

I. Ahmed · Accepted Answer · 2018-03-27 02:37:57Z

2

Please allow some delay to load the pages using window.onload events

<div>
    <button id='handler'>Event</button>
</div>
<div id='stringText'>
    <h4>Some Description</h4>
    <p>
        Some more information
    </p>
</div>

<script>
window.onload = function(){
 document.getElementById("handler").addEventListener("click", display, true);
};
   
    function display() {

        if (document.getElementById("stringText").style.display === "block") {
            document.getElementById("stringText").style.display = "none";
        } else {
            document.getElementById("stringText").style.display = "block";
        }

    };

</script>

edited Mar 27, 2018 at 2:37

answered Mar 27, 2018 at 2:32

I. Ahmed

2,5261 gold badge14 silver badges30 bronze badges

2 Comments

I. Ahmed Over a year ago

Updated with event, please check.

Pops Jones Over a year ago

Worked like a charm! Thank you. @Ele, this solution was helpful as well. Much appreciated.

Ele · Accepted Answer · 2018-03-27 02:37:50Z

1

If you make sure and set the initial display property to block it works fine. As an alternative, you could also try using jQuery, as I have in the snippet.

//with jquery

$(document).ready(function() {
  $('#handler').on('click', function() {
    $('#stringText').toggleClass('hide');
  })
})

.hide {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <button id='handler'>Event</button>
</div>
<div id='stringText'>
  <h4>Some Description</h4>
  <p>
    Some more information
  </p>
</div>

edited Mar 27, 2018 at 2:37

Ele

33.8k7 gold badges43 silver badges80 bronze badges

answered Mar 27, 2018 at 2:30

Rich

3,3463 gold badges23 silver badges30 bronze badges

1 Comment

Ele Over a year ago

There is a js event to capture when the DOM is loaded. jQuery is unnecessary.

Collectives™ on Stack Overflow

Problems with javascript event handler

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related