2012-02-16 129 views
1

我想统计用户点击每次鼠标点击的次数,所以我创建了一个函数,但它只计算第一次点击。我创建一个变量来存储计数值。点击计数功能不起作用?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>clicks</title> 

<script type="text/javascript"> 



function clickcount(){ 

var clicks=0; 
    document.getElementById('count').value= ++clicks; 


    } 

document.onclick=clickcount; 
</script> 


</head> 

<body> 

<input type="text" id="count" /> 
</body> 
</html> 
+0

http://jsfiddle.net/vuASn/ – xandercoded 2012-02-16 03:29:19

+0

现在我明白了,如果我把varibale出来的函数,那么increaments它的价值。现在我的问题是为什么我们需要把这个变量放在函数 – 2012-02-16 03:32:09

回答

2

那是因为你在函数里面声明了var clicks。每次调用时它都会被覆盖0。在函数的范围之外声明它。

var clicks = 0; 
function clickcount(){ 
    document.getElementById('count').value= ++clicks; 
} 

var关键字初始化变量。 JavaScript将在更狭窄的函数范围内使更广泛的范围定义可用的变量。因此,在函数外调用var clicks = 0将全局(window对象)范围的clicks位置。

+0

之外,谢谢迈克尔,我没有得到它。 – 2012-02-16 03:35:45

3

你需要让clicks全球,这样的功能继续增加相同的变量...

var clicks=0; 
function clickcount(){ 

    document.getElementById('count').value= ++clicks; 

} 
1

为了避免污染全局命名空间,你可以换你的代码在一个匿名函数和存储您的点击在closure

(function() { // Begin wrap with anonymous function 
    var clicks = 0; 
    function clickcount() { 
     document.getElementById("count").value = ++clicks; 
    } 

    // Attach to onload 
    window.onload = function() { 
     document.onclick = clickcount; 
    }; 
}()); // End wrap with anonymous function 
+0

+1,但可能应该使用load事件来附加侦听器,并检查document.getElementById(“count”)是否在分配给它的* value *属性之前返回一个元素。 – RobG 2012-02-16 05:48:06

+0

@RobG感谢您的建议,我添加了onload。 – mc10 2012-02-17 01:16:30