Javascript TypeError:document.getElementById（）为空

当我的一个函数名为“switchTurn”时，我试图更改图像的来源，但它不起作用，firebug一直说这是因为：

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

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

我不明白，我可以更改我所有图片的来源，除了带有“turns”ID的图片。有人能帮我吗

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

var-Deck=[]；
generateDeck（）；
变量编号=[]，Drew=0，turn=false；
生成枚举器（）；
函数generateNumber（）{
做{
数字[Drew]=Math.floor（Math.random（）*55）；
}而（甲板[数字[绘制]]=“|”）；
Drew++；
数字[Drew-1]=44；
如果（数字[Drew-1]==44 | |数字[Drew-1]==45 | |数字[Drew-1]==46 | |数字[Drew-1]==47）{
switchTurn（）；
}
}
函数generateDeck（）{
对于（i=0；i<56；i++）{
Deck[i]=i.toString（）；
}
}
函数丢弃（）{
甲板[数字[绘制]]=“|”；
}
函数switchTurn（）{
如果（转动===真）{
arrowTurn（“Up.png”）；
转向=假；
}否则如果（转===假）{
arrowTurn（“Down.png”）；
转身=真；
}
}
功能箭头转弯（x）{
document.getElementById（'turns'）.src=x；
}
函数DisplayPlayed（）{
document.getElementById（“PlayedCards”）.src=Deck[Numbers[Drew-1]]+.png；
丢弃（）；
}

您的JavaScript文件包含在

标记的元素上方。若要解决此问题，请将脚本标记移动到其内部元素下的主体中，或使用

window.onload

或DOM就绪方法的任何变体。

您的JavaScript文件包含在

标记中元素的上方。为了解决这个问题，将脚本标记移动到其内部元素下的主体中，或者使用

窗口.onload

或DOM就绪方法的任何变体。

为什么有两个

标记具有相同的id属性？它们是确定轮到玩家还是机器人的箭头。不要对两个或更多不同的对象使用相同的id元素。为什么有两个具有相同id属性的

标记？它们是确定是轮到玩家还是机器人的箭头。不要对两个或多个不同元素使用相同的id。

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