首頁猿問購物車增量和減量值 JS

購物車增量和減量值 JS

JavaScript

POPMUISE 2022-10-13 16:11:46

我正在嘗試增加和減少購物車中的值。我首先通過定位一個 id 來實現它，并且我的 js 代碼有效。但后來我意識到我將在購物車中有多個項目，所以我將無法定位 ID，所以我從 getElementById 更改為 getElementsByClassName，但 js 代碼不再有效。我該如何解決這個問題？<div class="quantity"> <form> <div class="value-button" class="decrease" onclick="decreaseValue()" value="Decrease Value">-</div> <input type="number" class="number" value="1" /> <div class="value-button" class="increase" onclick="increaseValue()" value="Increase Value">+</div> </form></div>JS// Increase Value // function increaseValue() { var value = parseInt(document.getElementsByClassName('number').value, 10); value = isNaN(value) ? 1 : value; value++; document.getElementsByClassName('number').value = value;} // Decrease Value // function decreaseValue() { var value = parseInt(document.getElementsByClassName('number').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementsByClassName('number').value = value;} 我以前工作的代碼<div class="quantity"> <form> <div class="value-button" id="decrease" onclick="decreaseValue()" value="Decrease Value">-</div> <input type="number" id="number" value="1" /> <div class="value-button" id="increase" onclick="increaseValue()" value="Increase Value">+</div> </form></div>JS// Increase Value // function increaseValue() { var value = parseInt(document.getElementById('number').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number').value = value;} // Decrease Value // function decreaseValue() { var value = parseInt(document.getElementById('number').value, 10); value = isNaN(value) ? 0 : value; value < 1 ? value = 1 : ''; value--; document.getElementById('number').value = value;}

查看完整描述

3 回答

函數式編程

TA貢獻1807條經驗獲得超9個贊

getElementsByClassName 返回集合。

相反document.getElementsByClassName('number').value，您需要使用document.getElementsByClassName('number')[0].value

反對回復 2022-10-13

GCT1015

TA貢獻1827條經驗獲得超4個贊

代替 html 中的 onclick 使用 addEventListener。例如，您有一些數量。

<form>

</form>

</div>

<form>

</form>

</div>

<form>

</form>

</div>

let quantities = document.getElementsByClassName('quantity');

for (let i=0; i<quantities.length; i++) {

let q = quantities[i];

let increaseElement = q.getElementsByClassName('increase')[0];

increaseElement.addEventListener('click', increaseValue, false);

function increaseValue() {

var value = parseInt(q.getElementsByClassName('number')[0].value, 10);

value++;

q.getElementsByClassName('number')[0].value = value;

}

反對回復 2022-10-13

慕萊塢森

TA貢獻1810條經驗獲得超4個贊

getElementsByClassName返回一個HTMLCollection；您需要對其進行迭代并單獨設置每個包含元素的值，而不是嘗試設置其HTMLCollection本身的值。

或者只使用querySelector，如下所示：

// Increase Value //

function increaseValue() {

var value = parseInt(document.querySelector('.number').value, 10);

value = isNaN(value) ? 1 : value;

value++;

document.querySelector('.number').value = value;

}

// Decrease Value //

function decreaseValue() {

var value = parseInt(document.querySelector('.number').value, 10);

value = isNaN(value) ? 0 : value;

value < 1 ? value = 1 : '';

value--;

document.querySelector('.number').value = value;

}

反對回復 2022-10-13

3 回答
0 關注
134 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

購物車增量和減量值 JS

購物車增量和減量值 JS

3 回答

添加回答