誰能告訴我為什么我的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 ，它類似於（但不等同於）數組。

而不是更改HTMLCollection的innerHTML ，您應該更改innerHTML HTMLCollection中的HTMLCollection 。

---

解決方案

如果您只有一個元素屬於“ clicks”類，則可以替換...

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; }); } } 

 <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> 

Answer 2

你的問題

如果我將p標簽更改為一個id而不是一個類，它將起作用，但是我希望它應用於多個項目

你的方法

這是行不通的，因為您嘗試在document.getElementsByClassName("clicks")返回的HTMLCollection上設置屬性innerHTML ，而不是在所有這些元素上進行設置。

固定

將您的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)
• 您可以使用textContent ，而不是用innerHTML 。 更安全，更快捷。
• 第二次定義var clicks1 = 0不會對您的代碼造成任何影響。

改寫

• 重寫相同的功能 。
• 重寫以匹配下面的案例：

 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的注釋）：

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/

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

並使用document.getElementById('clicks').innerHTML = clicks1;插入文本document.getElementById('clicks').innerHTML = clicks1;

同時刪除第二個var clicks1 = 0; 因為您只需要聲明一次變量。