javascript - 更简单的 Javascript 计数器

我需要一些有关点击事件的帮助，我正在尝试创建一个单独的计数器，该计数器会根据 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>

最佳答案

首先，您在两个地方使用 id='clicker'(ID 应该是唯一的)，然后使用 document.getElementsByClassName，它返回没有任何内容，因为您使用的是 ID 而不是类。

一旦将其更改为类，document.getElementsByClassName 将返回一个元素数组。您必须使用 clickerCount[0] 等，或者循环遍历数组。

关于javascript - 更简单的 Javascript 计数器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31213982/