javascript - Uncaught TypeError: Cannot read property 'id' of null - Stack Overflow

admin管理员组

文章数量:1425127

I'm trying to create an html5 audio player. It's for a radio station, so I need the player to reload the source and start playing from 'currrentTime=0;' when the stream starts again. I get an error in the script though, and i'm not sure why?

My script is run

Error location: if (player.id == 'paused') { - I get the error: ' Uncaught TypeError: Cannot read property 'id' of null

HTML:

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

My JS:

function checkState() {
var player = document.getElementById('player');
var psrc = ':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();
}

I'm trying to create an html5 audio player. It's for a radio station, so I need the player to reload the source and start playing from 'currrentTime=0;' when the stream starts again. I get an error in the script though, and i'm not sure why?

My script is run

Error location: if (player.id == 'paused') { - I get the error: ' 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>

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

• javascript
• html
• html5-audio

Share Improve this question Follow edited Oct 25, 2016 at 17:20 Tristan Navarrete asked Oct 25, 2016 at 15:40 Tristan NavarreteTristan Navarrete 2111 gold badge11 silver badge66 bronze badges 7

• var player = document.getElementById('player'); and id="paused" somethings not right – taguenizy Commented Oct 25, 2016 at 15:41
• ._. --- I'll quickly make that correction. – Tristan Navarrete Commented Oct 25, 2016 at 15:43
• 2 You keep changing the ID, so it no longer matches the second time you click. You should never need to change an ID. – adeneo Commented Oct 25, 2016 at 15:43
• How would you guys suggest I go about this then? -- This is my first attempt at Javascript. Slowly piecing things together by googling it haha – Tristan Navarrete Commented Oct 25, 2016 at 15:45
• I'm guessing you could find the answer amongst the questions in the Related section to the right.... which should have e up when you typed your question title. – Heretic Monkey Commented Oct 25, 2016 at 15:45

 |  Show 2 more ments

1 Answer 1

Sorted by: Reset to default 0

You have no element in your markup that has the id player. So when you tell JS to getElementById, it can't find anything. So the value bees 'null'. After that you call player.id - this is the same as trying to call the property id of an object that doesn't exist.

To fix: Give your player the attribute id="player" or change the selection call. There are other ways to select elements.

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

本文标签： javascriptUncaught TypeError Cannot read property 39id39 of nullStack Overflow