更简单的Javascript计数器_Javascript_Html

更简单的Javascript计数器

javascript html

更简单的Javascript计数器,javascript,html,Javascript,Html,我需要一些关于点击事件的帮助，我正在尝试通过img上的点击事件来增加单个计数器。我已经尝试了许多变体，我想在不使用jQuery的情况下解决这个问题 <script async> var count = 0; var clickerCount = document.getElementsByClassName('clicker'); var cat = { count : 0, counter: function(){

我需要一些关于点击事件的帮助，我正在尝试通过img上的点击事件来增加单个计数器。我已经尝试了许多变体，我想在不使用jQuery的情况下解决这个问题

    <script async>

    var count = 0;

    var clickerCount = document.getElementsByClassName('clicker');
    var cat = {
        count : 0,
        counter: function(){
            this.count++;
            clickerCount.textContent = "Kitten Click Count :" + this.count;
            console.log("counter function working");
            console.log(cat.count);
        }
    };

    function modifyNum(){
        cat.counter();
        console.log("modifyNum function working");

    }

    </script>
</head>
<body>
  <div style="display:inline">
    <div>
        <img src="http://placekitten.com/200/296" id="cat0" onclick="modifyNum();">
        <p id='clicker'>Kitten Click Count :</p>

    </div>
    <div>
        <img src="http://placekitten.com/200/296" id='cat1' onclick="modifyNum();">
        <p id='clicker'>Kitten Click Count :</p>
    </div>
  </div>


var计数=0；
var clickerCount=document.getElementsByClassName（'clicker'）；
var cat={
计数：0，
计数器：函数（）{
这个.count++；
clickerCount.textContent=“Kitten Click Count:”+this.Count；
控制台日志（“计数器功能工作”）；
控制台日志（类别计数）；
}
};
函数modifyNum（）{
cat.counter（）；
console.log（“modifyNum函数工作”）；
}
小猫点击次数：
小猫点击次数：

首先，您在两个位置使用

id='clicker'

（id应该是唯一的），然后使用

document.getElementsByClassName

，它不会返回任何内容，因为您使用的是id而不是类

一旦将其更改为类，

document.getElementsByClassName

将返回一个元素数组。您必须使用

clickerCount[0]

等等，或者在数组中循环。

首先，您在两个位置使用

id='clicker'

（id应该是唯一的），然后使用

document.getElementsByClassName

，因为您使用的是id而不是类，所以不会返回任何内容

一旦将其更改为类，

document.getElementsByClassName

将返回一个元素数组。您必须使用

clickerCount[0]

等等，或者在数组中循环。

好的，首先您有两个id为“clicker”的元素。你可能想让它们成为类和ID。因此，当您调用modifynum（）时，它无法找到它们，因为该类不存在。其次，JS在HTML元素之前加载。因此，当JS到达这一行时：

var clickerCount = document.getElementsByClassName('clicker');

它将什么也找不到，即使您更正了类名。因此，您希望将JS移动到HTML文档的页脚，或者将代码包装在pageLoad（）上调用的方法中

我认为这应该解决它。大部分情况下，您的对象看起来是正确的

好的，首先有两个元素的id为“clicker”。你可能想让它们成为类和ID。因此，当您调用modifynum（）时，它无法找到它们，因为该类不存在。其次，JS在HTML元素之前加载。因此，当JS到达这一行时：

var clickerCount = document.getElementsByClassName('clicker');

它将什么也找不到，即使您更正了类名。因此，您希望将JS移动到HTML文档的页脚，或者将代码包装在pageLoad（）上调用的方法中

我认为这应该解决它。大部分情况下，您的对象看起来是正确的

我已经解决了这个问题

如果你能对ID进行硬编码，那么在我看来，仅仅通过ID来操作事情就更容易了

    <div>
        <img src="http://placekitten.com/200/296" id="cat0" onclick="counter(0);">
        <p id='clicker0'>Kitten Click Count :</p>
        <input type="hidden" id="counter0" value="0">
    </div>


function counter(id) {
        var cnt = parseInt(document.getElementById("counter" + id).value);
        cnt++;
        document.getElementById("counter" + id).value = cnt;
        document.getElementById('clicker' + id).innerHTML = 'Kitten Click Count :' + cnt;
}


小猫点击次数：
功能计数器（id）{
var cnt=parseInt（document.getElementById（“计数器”+id）.value）；
cnt++；
document.getElementById（“计数器”+id）.value=cnt；
document.getElementById（'clicker'+id.）.innerHTML='Kitten Click Count:'+cnt；
}

这不是同样的方法，但我发现它很容易理解

希望能有所帮助。

我已经在这本书中解决了这个问题

如果你能对ID进行硬编码，那么在我看来，仅仅通过ID来操作事情就更容易了

    <div>
        <img src="http://placekitten.com/200/296" id="cat0" onclick="counter(0);">
        <p id='clicker0'>Kitten Click Count :</p>
        <input type="hidden" id="counter0" value="0">
    </div>


function counter(id) {
        var cnt = parseInt(document.getElementById("counter" + id).value);
        cnt++;
        document.getElementById("counter" + id).value = cnt;
        document.getElementById('clicker' + id).innerHTML = 'Kitten Click Count :' + cnt;
}


小猫点击次数：
功能计数器（id）{
var cnt=parseInt（document.getElementById（“计数器”+id）.value）；
cnt++；
document.getElementById（“计数器”+id）.value=cnt；
document.getElementById（'clicker'+id.）.innerHTML='Kitten Click Count:'+cnt；
}

这不是同样的方法，但我发现它很容易理解

希望能有所帮助。

这个例子应该有用。我将HTML与Javascript分开，因为它看起来更清晰。您可以以它为例，以自己的方式扩展/创建自己的

希望能有所帮助

HTML:


小猫点击次数：0
小猫点击次数：0

JS:

var-imagescantable=document.getElementsByClassName（“可数”）；
var计数器=[]；
对于（var i=0；i



var-imagescantable=document.getElementsByClassName（“可数”）；
var计数器=[]；
对于（var i=0；i


小猫点击次数：0
小猫点击次数：0
这个例子应该有用。我将HTML与Javascript分开，因为它看起来更清晰。您可以以它为例，以自己的方式扩展/创建自己的
希望能有所帮助
HTML:

小猫点击次数：0
小猫点击次数：0

JS:
var-imagescantable=document.getElementsByClassName（“可数”）；
var计数器=[]；
对于（var i=0；i