html/js中的投票計數器

-1

我對編程相當陌生，一直在學習HTML，CSS和Javascript。我正在研究一個涉及即將舉行的選舉的項目，其中用戶按下按鈕（使用HTML中的<form>）爲候選人投票。我遇到的問題是傳達結果。使用javascript或html，我將如何跟蹤每個按鈕被按下的次數，然後在網頁中傳遞信息，說明每個候選人的投票數和總票數。html/js中的投票計數器

編輯我已經搞亂了代碼，這裏是我目前的JavaScript文件，我設置了程序來告訴你你在alert（）消息中投票的人，但候選人的名字是「T顯示正確...

<!DOCTYPE html> 
<html>  
<head>   
<meta charset="utf-8" >   
<title>Election</title> 
</head> 
<body> 
<center> 
<h1>2016 Presidential Election</h1> 
<h2>Vote Here</h2> 
<form> 
<button type="button" onclick="clicksubmit()">Click to vote for Trump</button> 
<button type="button" onclick="clicksubmit()">Click to vote for Hillary</button> 
</form> 
<h3>Results:</h3> 
</center> 
<script src="election.js" type="text/javascript"></script> 
</body> 
</html>

JS：

function clicksubmit(){ 

    var votehillary = document.getElementById('hillary'); 
    alert("You voted for "+ votehillary); 
    var votetrump = document.getElementById('trump'); 
    alert("You voted for "+ votetrump); 

}

來源

2016-10-30 Jacob

告訴我們你做了什麼至今 –

您需要向我們展示你的代碼。所以我們可以看到錯誤在哪裏。 – Munchmallow

我會在一分鐘內上傳代碼，我需要從筆記本電腦中檢索它。它更多的是缺乏知識，然後是一個錯誤，但上傳我的東西。 – Jacob

要算你點擊按鈕，你可以聲明一個變量對每個候選人和遞增它們的每次點擊。要做到這一點，你需要改變你的按鈕元素和你的結果首標：

<h3 id="results"> 
    total: 0 
    trump: 0 
    hillary: 0 
</h3> 
<button type="button" id="trump-button">Click to vote for Trump</button> 
<button type="button" id="hillary-button">Click to vote for Hillary</button>

在你election.js文件，你可以獲取每個按鈕和onClick事件適用於他們，遞增聲明的變量頁面時加載：

var trump = 0; 
var hillary = 0; 

function refreshResults() { 
    var results = document.getElementById('results'); 
    results.innerHTML = 'total: ' + (trump + hillary); 
    results.innerHTML += '<br />trump: ' + trump; 
    results.innerHTML += '<br />hillary: ' + hillary; 
} 

document.getElementById('trump-button').addEventListener('click', function() { 
    trump++; 
    refreshResults(); 
}); 

document.getElementById('hillary-button').addEventListener('click', function() { 
    hillary++; 
    refreshResults(); 
});

來源

2016-10-30 21:49:08

但是，這段代碼有效，但寫得不好，可以通過多種方式進行改進。 –

最終產品生產出我正在尋找的東西。我可以問一下.addEventListener和refreshResults（）是做什麼的？ – Jacob

addEventListener是每個DOM節點都有的方法。使用這種方法，您可以將函數應用於類似click的事件，因此在單擊DOM節點時會調用該函數。 refreshResults調用在第4行中創建的函數。它設置結果標題的innerHTML。 –

html/js中的投票計數器

回答

相關問題