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: https://stackoverflow.com/a/49289840/3662110 — jmargolisvt, Mar 27 '18 at 02:31
This was a good read, and makes sense. I will correct the practice going forward, thank you! — Pops Jones, Mar 27 '18 at 03:04

Ele · Answer 1 · 2018-03-27T02:39:35.573

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>

I. Ahmed · Accepted Answer · 2018-03-27T02:37:57.557

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 '18 at 02:37

answered Mar 27 '18 at 02:32

I. Ahmed

2,438
1
12
29

Updated with event, please check. – I. Ahmed Mar 27 '18 at 02:38
Worked like a charm! Thank you. @Ele, this solution was helpful as well. Much appreciated. – Pops Jones Mar 27 '18 at 03:01

score 1 · Answer 3 · edited Mar 27 '18 at 02:37

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 '18 at 02:37

Ele

33,468
7
37
75

answered Mar 27 '18 at 02:30

Rich

3,156
3
19
29

There is a js event to capture when the DOM is loaded. jQuery is unnecessary. – Ele Mar 27 '18 at 02:38

Problems with javascript event handler

3 Answers3