0

当我的一个功能被称为“switchTurn”时，我正在尝试更改图像的来源，但是它不起作用并且萤火虫一直说这是因为：

TypeError: document.getElementById("turns") is null

document.getElementById('turns').src = x;

我不明白，我可以更改所有图像的来源，除了带有“turns”ID 的图像。谁能帮我解决这个问题？

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

1 回答 1

5

您的 JavaScript 文件包含在标记中的元素上方。<body>要解决这个问题，要么将脚本标签移动到其内部元素下的主体中，要么使用window.onloadDOM-ready 方法的任何变体。

于 2012-11-30T23:08:26.827 回答