为什么我的JS函数不能与按钮一起使用？

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();
            }

Answer 1

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();
}