如何使用純粹的HTML，CSS和Javascript爲點擊遊戲製作分數事件腳本

-1

我需要關於我的遊戲的幫助，在此追逐中我需要關於點擊事件的幫助。我有一個圖像，每次點擊它我都會得到1分。我需要幫助來創建這個非常基本的活動，或者需要一個善於爲我寫劇本的人。我創建了答題遊戲基本代碼：如何使用純粹的HTML，CSS和Javascript爲點擊遊戲製作分數事件腳本

<html> 
    <head> 
     <title>My Work</title> 
    </head> 
    <body> 
     <img id="nokia" src="phone.jpg" /> 
    </body> 
</html>

我還沒有做出很大的進展，你可以看到，我需要一個上擊事件幫助HTML或JavaScript中也有記分牌系統將是一個很好的接觸，但我可以弄清楚這一點。

我有一個朋友寫一些代碼，但時間有限我有一半的代碼，如果你想完成它，或者告訴我什麼，他試圖在這裏做的是，代碼：

<html> 
    <head> 
     <title>My Work</title> 
     <script> 
      (function() { 
       var score = 0; 
       var phone = document.getElementById("nokia"); 
       phone.onclick=function(){ 
        score++; 
        output = document.getElementById("score"); 
        output.innerHTML = score; 
       }; 
      })(); 
     </script> 
    </head> 
    <body> 
     <img id="nokia" src="phone.jpg" /> 
     <div id="score"></div> 
    </body> 
</html>

所有幫助非常感謝！ :)

來源

2015-04-26 Sten Bergman

你是否願意使用jQuery我們的普通javacsript？ –

你會做這樣的事情（純JS）

document.getElementById('nokia').onclick=function(){ 
    var score = parseInt(document.getElementById("score").innerHTML); 
    score++; 
    document.getElementById("score").innerHTML = score; 
}

下面一個完整的例子如小提琴：https://jsfiddle.net/sbunu38g/

注意：您需要將您的分數div的內容設置爲0在開始時。否則，您將在點擊圖像後收到NaN

更新：正如註釋中所述 - 要在您的標題元素中使用它，您需要將window.onload函數包裝在其中。通過這個，你將確保在嘗試攻擊onclick eventhandler之前加載需要的元素。

window.onload = function() { 
    document.getElementById('nokia').onclick=function(){ 
     var score = parseInt(document.getElementById("score").innerHTML); 
     score++; 
     document.getElementById("score").innerHTML = score; 
    } 
};

來源

2015-04-26 11:40:06

似乎我無法使其工作，或者代碼錯誤。這裏是我做了與你的代碼發佈@FrankProvost' 我的工作

' –

好像評論系統剛剛搗毀一切，我在寫了一堆文字，TL：TR –

您需要將這個腳本放在你的身體。更具體地說，你需要把它放在你身體的盡頭（在你需要的html元素（圖像和分數）下 - 如果你想將它放在你的頭部，你可以將window.onload包裹在它的周圍。會看起來像這樣：window.onload = function（）{document.get ...}; –

如何使用純粹的HTML，CSS和Javascript爲點擊遊戲製作分數事件腳本

回答

相關問題