2015-09-01 172 views
-3

現在我有這段代碼,我想在屏幕上打印(而不是彈出)按鈕被點擊了多少次的值。我想我會設置var index = 0,並在每次點擊時增加它......但我不確定如何在屏幕上更改變量值。例如,現在它已被點擊0次。當我點擊按鈕,我想要在那裏的值< - (0)變爲1.我可能必須將白色的空白圖片,然後重新打印索引的值...html打印變量值

此外..我希望這是所有的HTML ..如果可能的話,請不要PHP或JavaScript。

<html> 
<head> 
<script type="text/javascript"> 
function getVote(int) 
{ 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("poll").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","poll_vote.php?vote="+int,true); 
xmlhttp.send(); 


if(typeof(Storage)!=="undefined") 
    { 
    if (localStorage.clickcount) 
    { 
    localStorage.clickcount=Number(localStorage.clickcount)+1; 
    } 
    else 
    { 
    localStorage.clickcount=1; 
    } 
    document.getElementById("result").innerHTML="You have voted " + localStorage.clickcount + " times before this session"; 
    } 
else 
    { 
    document.getElementById("result").innerHTML="Sorry, your browser does not support web storage..."; 
    } 
} 

</script> 

</head> 
<body bgcolor=#5D003D> 
<div id="poll"> 

<p>Click the button to see the counter increase.</p> 
<p>Close the browser tab (or window), and try again, and the counter will continue to count (is not reset).</p><form> 
<input type="Button" class="voteButton" name="vote" value="Vote" onclick="getVote(this.value)" /> 
</form> 
</div> 
</body> 
</html> 
+0

DEMO,讓plunker或jsFiddle!或至少代碼片段SO –

+0

這個問題有點難以理解。請隨意添加一個JSFiddle工作,但請知道這不能在HTML中完成,您絕對需要JS。 –

+1

我希望能夠飛行。但沒有飛機,或翅膀或人造物。有時候我們想要的只是不實際。 – leigero

回答

0

不,如果沒有JavaScript,至少不能這樣做。這是一個簡單的例子。首先,我告訴窗口對象在頁面上的所有圖像/腳本/內容已經加載時給我一個大喊。這意味着我可以確定在我嘗試將事件偵聽器附加到它包含的任何元素之前,正文中包含的HTML將存在。

接下來,當我知道內容已加載時,我告訴按鈕讓我知道它何時被點擊。

最後,點擊按鈕後,我增加全局變量pressCount,然後將其值設置爲span元素的內容。

<!doctype html> 
<html> 
<head> 
<script> 
"use strict"; 
window.addEventListener('load', onDocLoaded, false); 

function onDocLoaded(evt) 
{ 
    document.getElementById('myButton').addEventListener('click', onButtonPressed, false); 
} 

var pressCount = 0; 
function onButtonPressed(evt) 
{ 
    ++pressCount; 
    document.getElementById('countOutput').innerText = pressCount; 
} 
</script> 
</head> 
<body> 
    <button id='myButton'>PressMe</button> has been pressed <span id='countOutput'>0</span> times. 
</body> 
</html>