TypeError：document.getElementById（）为null [英] TypeError: document.getElementById() is null
本文介绍了TypeError：document.getElementById（）为null的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
当我的某个函数被称为switchTurn时，我试图改变图像的来源，但它不工作，萤火虫一直说这是因为：
TypeError：document.getElementById（turns）为空
document.getElementById（'turns'）。src = x;
我不明白，我可以更改所有图片的来源，与转身ID。谁能帮我解决这个问题？
！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html>
< meta http-equiv =Content-typecontent =text / html; charset = UTF-8>
< head>
< link rel =stylesheettype =text / csshref =default.css/>
< script language =Javascriptsrc =default.js>< / script>
< / head>
< body onload =DisplayPlayed（）onmousedown =return false>
< div id =wrapperonmousedown =return false>
< div id =Bcardsonmousedown =return false>
< img src =turnedcard.pngid =Bcard01/>
< img src =turnedcard.pngid =Bcard02/>
< img src =turnedcard.pngid =Bcard03/>
< img src =turnedcard.pngid =Bcard04/>
< img src =invisiblecard.pngid =Bcard05/>
< img src =invisiblecard.pngid =Bcard06/>
< img src =invisiblecard.pngid =Bcard07/>
< / div>
< div id =Pcards>
< img src =turnedcard.pngid =Pcard01/>
< img src =turnedcard.pngid =Pcard02/>
< img src =turnedcard.pngid =Pcard03/>
< img src =turnedcard.pngid =Pcard04/>
< img src =invisiblecard.pngid =Pcard05/>
< img src =invisiblecard.pngid =Pcard06/>
< img src =invisiblecard.pngid =Pcard07/>
< / div>
< img src =Down.pngid =turnsonmousedown =return false/>
< img src =Down.pngid =turnsonmousedown =return false/>
< / div>
< / body>
< / html>
JavaScript
var Deck = [];
generateDeck（）;
var Numbers = []，Drew = 0，turn = false;
generateNumber（）;
函数generateNumber（）{
do {
Numbers [Drew] = Math.floor（Math.random（）* 55）;
} while（Deck [Numbers [Drew]] ===|）;
Drew ++;
数字[德鲁 - 1] = 44;
if（Numbers [Drew - 1] === 44 || Numbers [Drew - 1] === 45 || Numbers [Drew - 1] === 46 || Numbers [Drew - 1] == = 47）{
switchTurn（）;
函数generateDeck（）{
for（i = 0; i <56; i ++）{
Deck [i] = i.toString（）;
function discard（）{
Deck [Numbers [Drew]] =|;
函数switchTurn（）{
if（turn === true）{
arrowTurn（Up.png）;
turn = false;
} else if（turn === false）{
arrowTurn（Down.png）;
turn = true;
函数arrowTurn（x）{
document.getElementById（'turns'）。src = x;
$ b函数DisplayPlayed（）{
document.getElementById（PlayedCards）。src = Deck [Numbers [Drew - 1]] +.png;
discard（）;
}
解决方案
em> 元素在< body> 标记中。要解决这个问题，可以将脚本标记移动到其内部元素下的主体中，或使用 window.onload 或任何DOM-ready方法的变体。
I'm trying to change the source of an image when one of my function is called "switchTurn" but, it's not working and firebug keeps saying it's because of this :
TypeError: document.getElementById("turns") is null
document.getElementById('turns').src = x;
I don't understand, I'm able to change the source of all my images except the one with the "turns" ID. Could anyone help me out on this?
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<script language="Javascript" src="default.js" ></script>
</head>
<body onload="DisplayPlayed()" onmousedown="return false">
<div id="wrapper" onmousedown="return false">
<div id="Bcards" onmousedown="return false">
<img src="turnedcard.png" id="Bcard01"/>
<img src="turnedcard.png" id="Bcard02"/>
<img src="turnedcard.png" id="Bcard03"/>
<img src="turnedcard.png" id="Bcard04"/>
<img src="invisiblecard.png" id="Bcard05"/>
<img src="invisiblecard.png" id="Bcard06"/>
<img src="invisiblecard.png" id="Bcard07"/>
</div>
<div id="Pcards">
<img src="turnedcard.png" id="Pcard01"/>
<img src="turnedcard.png" id="Pcard02"/>
<img src="turnedcard.png" id="Pcard03"/>
<img src="turnedcard.png" id="Pcard04"/>
<img src="invisiblecard.png" id="Pcard05"/>
<img src="invisiblecard.png" id="Pcard06"/>
<img src="invisiblecard.png" id="Pcard07"/>
</div>
<img src="turnedcard.png" id="PlayedCards" onmousedown="return false"/>
<img src="Down.png" id="turns" onmousedown="return false"/>
<img src="Down.png" id="turns" onmousedown="return false"/>
</div>
</body>
</html>
JavaScript
var Deck = [];
generateDeck();
var Numbers = [], Drew = 0, turn = false;
generateNumber();
function generateNumber(){
do{
Numbers[Drew] = Math.floor(Math.random() * 55);
}while(Deck[Numbers[Drew]] === "|");
Drew++;
Numbers[Drew - 1] = 44;
if(Numbers[Drew - 1] === 44 || Numbers[Drew - 1] === 45 || Numbers[Drew - 1] === 46 || Numbers[Drew - 1] === 47){
switchTurn();
}
}
function generateDeck(){
for(i = 0; i < 56; i++){
Deck[i] = i.toString();
}
}
function discard(){
Deck[Numbers[Drew]] = "|";
}
function switchTurn(){
if(turn === true){
arrowTurn("Up.png");
turn = false;
}else if(turn === false){
arrowTurn("Down.png");
turn = true;
}
}
function arrowTurn(x){
document.getElementById('turns').src = x;
}
function DisplayPlayed(){
document.getElementById("PlayedCards").src = Deck[Numbers[Drew - 1]] + ".png";
discard();
}
解决方案
Your JavaScript file is included above the elements in the <body> tag. To fix this, either move the script tag into the body under the elements inside it or use window.onload or any variations of DOM-ready methods.
这篇关于TypeError：document.getElementById（）为null的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
