How to use event listener in JS

Question

Im trying to use the same buttons for different function in the program. So I tried using event listeners but for some reason its not working. Could look at the code and tell me what I have done wrong? Thanks. (I omited the HTML tags and so for shortening the posted code)

    <script type="text/javascript">
    var photo = "photo";
    var edgar = "edgar"

    var x = document.getElementById("yes");
    x.addEventListener("click", choiceyesstory);
    x.addEventListener("click", choiceyesfriendly);

    var y = document.getElementByID("no");
    y.addEventListener("Click", choicenostory);
    y.addEventListener("click", choicenofriendly);

    function choiceyesstory(x) {
    document.getElementById("photo").src = "images/dragon1.jpg";
    document.getElementById("stage1").innerHTML = "Once upon a time";
    setTimeout("choice2()",5*1000);

    }

    function choicenostory(y) {
    document.getElementById("photo").src = "images/sea.jpg";
    document.getElementById("stage1").innerHTML = "Would you like to    
    listen to some music?";
    document.getElementById("edgar").play();
    }
    function choice2(x){
    document.getElementById("photo").src = "images/dragon9.jpg";
    document.getElementById("stage1").innerHTML = "Was he a friendly 
    dragon?";
    }

    function choiceyesfriendly(x) {
    {document.getElementById("photo").src = "images/dragon2.jpg";
    document.getElementById("stage1").innerHTML = "He had many friends";
    }

    function choicenofriendly(y)
    { document.getElementByID ("photo").src = "images/dragon3.jpg";
    document.getElementById("stage1").innerHTML = "He did so and so";
    }


    </script>
    <body>
    <button id="yes">Yes</button>
    <button id="no">No</button>

    </body> 

Edit / Delete Edit Post   Quick reply to this message Reply   Reply With Quote Reply With Quote   Multi-Quote This Message

Reply to Thread Quick Navigation DOM and JSON scripting Top Quick Reply Quick Reply

What does _its not working_ mean exactly? What is happening? What should it do instead? Any errors in the console? What browser? Don't use a string as the first parameter of `setTimeout` and `setInterval`. Pass it a function instead - `setTimeout(choice2, 5*1000)` — Andreas, Feb 15 '15 at 02:07
when one of the buttons is pushed - it does not trigger anything. it is supposed to bring about a change in text and the appearance of an image. thanks — Ayelet Abraham, Feb 15 '15 at 02:16
That's two of four questions. Any errors in the console? What browser you're using? `.addEventListener()` won't work in IE8 or below. — Andreas, Feb 15 '15 at 02:21
possible duplicate of [Why does jQuery or a DOM method such as getElementById not find the element?](http://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element) — Teemu, Feb 15 '15 at 17:59

score 0 · Answer 1 · edited May 23 '17 at 11:48

I took yours js and simplified it. The event listener by itself is working ok. Maybe you have issue somewhere else.

http://jsfiddle.net/jnmav1wk/

var x = document.getElementById("yes");
console.log(x);
x.addEventListener("click", choiceyesstory);

function choiceyesstory(x) {
    alert('Clicked');
}

Try to simplify your problem, get rid of the NO and all corresponding code, keep removing code till it's working. Then add feature by feature till it will stop working and you know where it's broken.

I use console.log(); and alert(); to make it more verbose to me.

Sometimes the code needs to be inside this:

$( document ).ready(function() {
  yourCode();
});

This needs jQuery, if you want avoid it, here are some alternatives:

$(document).ready equivalent without jQuery

Because if the functions are executed against HTML code which is in middle of loading (and maybe the YES button is not there yet while you try to attach the event listener to it, etc...)

pseudo code typo, edited the answer. It's from jQuery, but it doesn't have to be, there are other ways to execute the code after HTML got loaded — Anton Krug, Feb 15 '15 at 04:43

How to use event listener in JS

1 Answers1