Question

我需要一些关于click事件的帮助，我正在尝试使用img上的click事件增加一个单独的计数器。我尝试了很多变种，我想在不使用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>

Answer 1

首先，您在两个地方使用dict（ID应该是唯一的），然后使用id='clicker'，因为您使用了ID而不是类，所以不返回任何内容。< / p>

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

Answer 2

我已在此JSFiddle中解决了这个问题！

如果您可以对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;
}

这不是同一种方法，但我发现它很容易理解。

希望它有所帮助。

Answer 3

此示例应该有效。我已经将HTML与Javascript分开了，因为它看起来更清晰。您可以使用它作为示例以您自己的方式扩展/创建自己的。

希望有所帮助

HTML：

<div style="display:inline">
    <div>
        <img src="http://placekitten.com/200/296" id="1" class="countable">
        <span>Kitten Click Count :</span><span id="counter-for-1">0</span>

    </div>
    <div>
        <img src="http://placekitten.com/200/296" id="2" class="countable">
            <span>Kitten Click Count :</span><span id="counter-for-2">0</span>
    </div>
</div>

JS：

var imagesCountable = document.getElementsByClassName("countable");
var counters = [];

for (var i = 0; i < imagesCountable.length; i++) {
    counters[imagesCountable[i].id] = 0;
    imagesCountable[i].onclick = function(e) {
        document.getElementById("counter-for-" + e.currentTarget.id)
        .innerHTML = ++counters[e.currentTarget.id];
    }
}

var imagesCountable = document.getElementsByClassName("countable");
var counters = [];

for (var i = 0; i < imagesCountable.length; i++) {
    counters[imagesCountable[i].id] = 0;
    imagesCountable[i].onclick = function(e) {
    var cElem = document.getElementById("counter-for-" + e.currentTarget.id);
        cElem.innerHTML = ++counters[e.currentTarget.id];
    }
}

<div style="display:inline">
    <div>
        <img src="http://placekitten.com/200/296" id="1" class="countable">
        <span>Kitten Click Count :</span><span id="counter-for-1">0</span>

    </div>
    <div>
        <img src="http://placekitten.com/200/296" id="2" class="countable">
            <span>Kitten Click Count :</span><span id="counter-for-2">0</span>
    </div>
  </div>

Answer 4

好的，首先你有两个ID为＆＃39; clicker＆＃39;的元素。你可能意味着那些是类和ID。因此，当你调用modifynum（）时，它无法找到那些，因为类不存在。其次，您的JS在HTML元素之前加载。所以当JS进入这一行时：

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

即使您更正了类名，也不会发现任何内容。因此，您希望将JS移动到HTML文档的页脚，或者将代码包装在pageLoad（）上调用的方法中。

我认为应该照顾它。在大多数情况下，您的对象看起来是正确的。

更简单的Javascript计数器

4 个答案: