3 回答

TA贡献1807条经验 获得超9个赞
getElementsByClassName 返回集合。
相反document.getElementsByClassName('number').value
,您需要使用document.getElementsByClassName('number')[0].value

TA贡献1827条经验 获得超4个赞
代替 html 中的 onclick 使用 addEventListener。例如,您有一些数量。
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</form>
</div>
<div class="quantity">
<form>
<div class="value-button" class="decrease" value="Decrease Value">-</div>
<input type="number" class="number" value="1" />
<div class="value-button" class="increase" value="Increase Value">+</div>
</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;
}
}

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;
}
添加回答
举报