2

I have problem with adding event listener into JS...If i connect button with onclick attribute its working but if I delete it in HTML and try to add eventListener('click', myFunction), its not working. And btw its a simple dropdown button.

In following example in button i deleted onclick="myFunction" and added this - >

JavaScript:

document.getElementById("btn").addEventListener('click', myFunction);

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
 

HTML:

<button id="btn" class="dropbtn">RECEPT</button>
<div id="myDropdown" class="dropdown-content">
  <ul>
    <li>-5 jaja</li>
    <li>-0.2l mleka</li>
    <li>-100g slanine</li>
    <li>-200g brasna</li>
    <li>-10g putera</li>
    <li>-50g sira</li>
    <p class="recipeInfo">Kuvati na laganoj vatri i ostaviti da se krcka 5 minuta</p>
  </ul>
</div>

I dont know what is the problem nor solution...Any help?

Tyler2P
  • 2,324
  • 26
  • 22
  • 31
Veljko Kukic
  • 107
  • 1
  • 4
  • 12
  • If you inject the function directly like here https://www.w3schools.com/jsref/met_element_addeventlistener.asp , does it work ? – sagi Aug 29 '18 at 14:23
  • where in HTML is your ` – Dan O Aug 29 '18 at 14:23
  • hard to tell as your example is incomplete but the usual suggestion is that your likely binding the event before the element exists, use a document ready event to wait for the html to load before running the script. – digital-pollution Aug 29 '18 at 14:30
  • Possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) – Dan O Aug 29 '18 at 14:33
  • my script tag is in head part and its connected with separate document called togglebtn.js – Veljko Kukic Aug 29 '18 at 14:37

4 Answers4

5

You are probably trying to access the DOM elements before they are ready. Try placing your Javascript code inside a DOMContentLoaded listener:

document.addEventListener("DOMContentLoaded", function(event) { 
    // put your javascript code here
});

This will guarantee that your Javascript code will have access to all DOM elements. Read more at $(document).ready equivalent without jQuery

HugoTeixeira
  • 4,674
  • 3
  • 22
  • 32
3

More than one year later, but still maybe it is useful for someone:

I was struggling with my javascript ajax request that stopped working after server migration to AWS.

After hours trying to figure out what the problem was, I realized that I was using

window.addEventListener("DOMContentLoaded", function(event) { ...}

Instead of

document.addEventListener("DOMContentLoaded", function(event) { ...}

As soon as I changed to "document.", every ajax request to my service got a proper response.

I am not a javascript developer and maybe because of that, it was a nightmare for me

Hope it helps

2

I think problem is that you are not waiting for page to load completely. Use jQuery to make sure page is loaded.

And then use jQuery on for click event

$(document).ready(function(){

$("#btn").on('click', myFunction);

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

});
Asad ullah
  • 620
  • 2
  • 9
  • 26
0

You have to wait page load. But you don't need jQuery, you can wrap your js code in a self executed function, like this:

(function(){
    // your code
}())