2012-05-05 85 views
1

有一個輕微的問題叫骰子游戲的math.random圖像。當我點擊滾動按鈕時,圖像不會改變。我將圖像保存在.html文件所在的位置。任何幫助深表感謝!JavaScript骰子游戲 - 圖像不變

擲骰子

<script type="text/javascript"> 
    var dieImage; 

    function start() 
    { 
     var button = document.getElementById(rollButton); 
     button.addEventListener("click", rollDice, false); 
     dieImage = document.getElementById("die1"); 
    } 

    function rollDice() 
    { 
    setImage(dieImage); 
    } 

    function setImage(dieImg) 
    { 
    var dieValue = Math.floor(1 + Math.random() * 6); 
    dieImg.setAttribute("src", "die" + dieValue + ".jpg"); 
    dieImg.setAttribute("alt", "dieImg with" + dieValue + "spots"); 

    if (dieValue == 6) 
     { 
     document.getElementById("sometext").innerHTML = "You Win!"; 
     } 
    else 
     { 
     document.getElementById("sometext").innerHTML = "Roll Again"; 
     } 

    } 

    window.addEventListener("load", start, false); 
</script> 
</head> 
<body> 
    <form action = "#"> 
     <input id = "rollButton" type = "button" value = "Roll Dice"> 
    </form> 
    <li> 
     <img id = "die1" src = "die1.jpg" alt = "blankImage"> 
    </li> 
    <div id = "sometext">Roll for a 6!</div> 
</body> 

回答

3

與上面的代碼的唯一問題是這一行:

var button = document.getElementById(rollButton); 

應改爲

var button = document.getElementById("rollButton"); 

上述更改會導致該功能起作用,並且圖像被更新。假設你的所有圖像都在正確的位置,你會看到它們發生了變化。

爲了鼓勵,我建議你在Firefox中編寫代碼並獲取Firebug。使用這些工具,您可以使用Firebug控制檯和/或Firefox的Web Developer錯誤控制檯。這對於快速解決這類問題非常有用。

+0

工作完美。多謝,夥計。 – user1376817