Why doesn't my JS function work with my button?

Question

Trying to make my own play button
Audio loads and plays fine with the HTML Audio Tag
Error console says "Fails to load resource https://open.scdn.co/static/embed.2019-03-05_152e14cd.js.map"
song.play(); typed into JS console works fine
Button does not activate function!

HTML

                <audio id="song" controls> <source src="song.mp3"></source>
                </audio>
                <button class="controls" id="play">Play</button>

JavaScript

            var play = document.getElementById("song");
            song.addEventListener ("click", buttonActions);
            function buttonActions(event){
                song.play();
            }

No, that is not a definition of the variable `song`. That is giving an id to a DOM element. Giving an element an id does not mean it is available as a property in javascript. If it were, what would be the point of `document.getElementById` — Isaac Vidrine, Mar 05 '19 at 19:21
@IsaacVidrine: I just said *" IDs become global variables."*. But maybe this is better: [Do DOM tree elements with ids become global variables?](https://stackoverflow.com/q/3434278/218196). I can also offer this simple example: https://jsfiddle.net/tzvurLy8/ — Felix Kling, Mar 05 '19 at 19:22
@FelixKling Wow, honestly had no clue that existed, but for good reasons I see why I never knew it was a thing, cause no one should really ever use it. — Isaac Vidrine, Mar 05 '19 at 19:25

rossipedia · Accepted Answer · 2019-03-05T19:19:06.800

You're attaching the event handler to the <audio> element, instead of the <button> element.

Instead of:

var play = document.getElementById("song");
song.addEventListener ("click", buttonActions);    
function buttonActions(event){
    song.play();
}

It should be:

var play = document.getElementById("play");
play.addEventListener ("click", buttonActions);    
function buttonActions(event){
    var song = document.getElementById("song");
    song.play();
}

Why doesn't my JS function work with my button?

1 Answers1