未捕获的类型错误：无法读取 null 的属性“id”答案

【问题标题】：Uncaught TypeError: Cannot read property 'id' of null未捕获的类型错误：无法读取 null 的属性“id”
【发布时间】：2016-10-25 15:40:36
【问题描述】：

我正在尝试创建一个 html5 音频播放器。这是一个广播电台，所以我需要播放器重新加载源并从 'currentTime=0;' 开始播放当流再次开始时。我在脚本中遇到了错误，我不确定为什么？

我的脚本正在运行

错误位置：if (player.id == 'paused') { - 我收到错误：' Uncaught TypeError: Cannot read property 'id' of null

HTML：

<audio onplay="checkState()" controls="controls" id="paused" src="http://rmceng.radiomaria.ca:8162/;stream.mp3"></audio>

我的 JS：

function checkState() {
var player = document.getElementById('player');
var psrc = 'http://rmceng.radiomaria.ca:8162/;stream.mp3';
if (player.id == 'paused') {
    player.currentTime = 0;
    player.src = psrc;
    player.load();
    player.play();
    document.getElementById('player').id = 'playing';
}
else {
    player.pause();
    player.src = "";
    document.getElementById('player').id = 'paused';
    }
}

window.onload = function(){
    checkState();
}

【问题讨论】：

var player = document.getElementById('player'); 和 id="paused" 有点不对
._. --- 我会尽快改正。
您不断更改 ID，因此它不再匹配您第二次点击。您永远不需要更改 ID。
那你们建议我怎么做呢？ -- 这是我第一次尝试 Javascript。通过谷歌搜索慢慢拼凑起来哈哈
我猜你可以在右侧相关部分的问题中找到答案......当你输入你的问题标题时应该会出现。

标签： javascript html html5-audio

【解决方案1】：

您的标记中没有包含 id player 的元素。所以当你告诉 JS 去 getElementById 时，它什么也找不到。因此该值变为“空”。之后您调用 player.id - 这与尝试调用不存在的对象的属性 id 相同。

修复：为您的玩家提供属性id="player" 或更改选择调用。还有其他选择元素的方法。

document.getElementById(id_string)
document.getElementsByTagName(tag_name)
document.getElementsByClassName("class_values")
document.getElementsByName("name_value")
document.querySelector(css_selector)
document.querySelectorAll(css_selector)

【讨论】：