2015-09-01 203 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>