更改HTML <input> 通過javascript圖片，無法調用方法addEventListener

Question

我正在嘗試獲取輸入圖像，以在單擊時通過javascript進行更改，但通過Google Chrome調試得到以下錯誤：

Uncaught TypeError: Cannot call method 'addEventListener' of undefined 

以下是我的HTML代碼：

<section id="skin">
<video id="mainPlayer" width="640" height="360">
    <source src="video.mp4">
</video>
<nav>
    <div id="buttons">
        <input type="image" src="play_button.png" id="playButton" width="22" height="22">
    </div>
    <div id="defaultBar">
        <div id="progressBar"></div>
    </div>
    <div style="clear:both"></div>
</nav>

這是我的JavaScript代碼：

function doFirst() {
    mainPlayer = document.getElementById('mainPlayer');
    playButton = document.getElementsByName('playButton')[0];

    playButton.addEventListener('click', playOrPause, false);
}

function playOrPause() {
    if (!mainPlayer.paused && !mainPlayer.ended) {
    mainPlayer.pause();
    playButton.src="controls.png";
    window.clearInterval(updateBar);
} else {
    mainPlayer.play();
    playButton.src="play_button.png"
    updateBar = setInterval(update, 500);
    }
}

window.addEventListener('load',doFirst,false);

Answer 1

playButton = document.getElementsByName（'playButton'）[0]; 你會在這里得到一個空數組

您需要在輸入標簽中添加名稱屬性或更改為

playButton = document.getElementById('playButton');