任何人都可以告诉我为什么我的JavaScript点击无效？

Question

我正在制作一个购物车，希望改变数量，但无法解决为什么它不起作用。我创造了两个功能，一个用于添加数量，一个用于带走。我想将它应用于购物车中的多个对象。它可以工作，如果我将p标签更改为id而不是类，但我希望它适用于多个项目

<div class="controlpic">
  <img class="img" src="jsbook1.png">
  <button onClick="onClick2()">-</button>
  <p class="clicks">0</p>
  <button onClick="onClick()">+</button>
  <button class="addBasket">Add to Basket</button>
  <div>some text about this product</div>
</div>

/* onclick function will add clicks for basket*/
var clicks1 = 0;

function onClick() {
    clicks1 += 1;
    document.getElementsByClassName("clicks").innerHTML = clicks1;
  }
  /* onclick function will take away clicks for basket*/
var clicks1 = 0;

function onClick2() {
  if (clicks1 > 0) {
    clicks1 -= 1;
    document.getElementsByClassName("clicks").innerHTML = clicks1;
  }
}

Answer 1

问题

代码中的问题是getElementsByClassName返回HTMLCollection，类似于（但不相同）数组。

您应该更改innerHTML中的HTMLCollection元素，而不是更改innerHTML的{​​{1}}。

解决方案

如果您只有一个“点击”类的元素，则可以只替换...

HTMLCollection

...与......

document.getElementsByClassName("clicks").innerHTML = clicks1;

......一切都会好起来的。

如果您需要支持多个元素，则必须循环遍历这些元素：

document.getElementsByClassName("clicks")[0].innerHTML = clicks1;

演示

[].forEach.call(document.getElementsByClassName('clicks'), function(clicks) {
    clicks.textContent = clicks1;
});

var clicks1 = 0;

function onClick() {
    clicks1 += 1;
    [].forEach.call(document.getElementsByClassName('clicks'), function(clicks) {
        clicks.textContent = clicks1;
    });
}

function onClick2() {
    if (clicks1 > 0) {
        clicks1 -= 1;
        [].forEach.call(document.getElementsByClassName('clicks'), function(clicks) {
            clicks.textContent = clicks1;
        });
    }
}

Answer 2

您的问题

  

如果我将p标记更改为ID而不是类，但我希望将其应用于多个项目

您的方法

它不起作用，因为您试图在document.getElementsByClassName("clicks")返回的innerHTML上设置属性HTMLCollection，而不是在每个元素上设置它。

修复

将您的document.getElementsByClassName("clicks").innerHTML = clicks1替换为：

[].forEach.call(document.getElementsByClassName('clicks'), function(element) {
  element.textContent = clicks1;
});

演示

下面的演示包含许多缺陷，它只介绍了如何实现上述修复。此外，每个数量修饰符（+或-）将更新所有计数器。有关此问题的解决方案，请参阅重写部分。

/* onclick function will add clicks for basket*/
var clicks1 = 0;

function onClick() {
    clicks1 += 1;
    [].forEach.call(document.getElementsByClassName('clicks'), function(element) {
      element.textContent = clicks1;
    });
  }
  /* onclick function will take away clicks for basket*/
var clicks1 = 0;

function onClick2() {
  if (clicks1 > 0) {
    clicks1 -= 1;
    [].forEach.call(document.getElementsByClassName('clicks'), function(element) {
      element.textContent = clicks1;
    });
  }
}

<div class="controlpic">
  <img class="img" src="jsbook1.png">
  <button onClick="onClick2()">-</button>
  <p class="clicks">0</p>
  <button onClick="onClick()">+</button>
  <button class="addBasket">Add to Basket</button>
  <div>some text about this product</div>
</div>

评论

关于您的代码的其他几点说明：

• 请勿使用内联onclick使用element.addEventListener('click', someFunction)
• 您可以使用innerHTML而不是textContent。它更安全，更快。
• 第二次定义var clicks1 = 0对您的代码没有任何影响。

重写

• Rewrite of the same functionality。
• 重写以符合下面附带的案例：

function setQuantityModifier(element) {
  'use strict';
  var quantity = element.parentNode.getElementsByClassName('clicks')[0];
  element.addEventListener('click', function() {
    'use strict';
    if (element.value === '+') {
      quantity.textContent = parseInt(quantity.textContent) + 1;
    }
    else if (parseInt(quantity.textContent) > 0) {
      quantity.textContent = parseInt(quantity.textContent) - 1;
    }
  });
}

[].forEach.call(document.querySelectorAll('.controlpic > input'), setQuantityModifier);

<div class="controlpic">
  <img class="img" alt="ADDME" src="jsbook1.png"/>
  <input type="button" value="&ndash;"/>
  <p class="clicks">0</p>
  <input type="button" value="+"/>
  <button class="addBasket">Add to Basket</button>
  <div>some text about this product</div>
</div>

<div class="controlpic">
  <img class="img" alt="ADDME" src="jsbook2.png"/>
  <input type="button" value="&ndash;"/>
  <p class="clicks">0</p>
  <input type="button" value="+"/>
  <button class="addBasket">Add to Basket</button>
  <div>some text about this product</div>
</div>

Answer 3

它不起作用，因为document.getElementsByClassName返回一个数组（如您所见，getElement s ，这是复数形式）。您可以执行document.getElementsByClassName('clicks')[0].innerHTML，也可以使用document.querySelector('.clicks').innerHTML

编辑：要使用类名更新多个元素，您可以使用（基于@ tymeJV＆＃39;评论）：

var clicks = document.getElementsByClassName('clicks');
for(var i = 0; i < clicks.length; ++i) {
    clicks[i].innerHTML = "...";
}

我个人喜欢使用document.querySelectorAll('.clicks')进行任何匹配（无论是类，ID还是属性）。

Answer 4

这应该适合您：https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/30/

将ID添加到<p class="clicks" id="clicks">0</p>

使用document.getElementById('clicks').innerHTML = clicks1;

插入文字

同样删除第二个var clicks1 = 0;，因为您只需要声明一次变量。