我有一个加减按钮，可以从用户要支付的总金额中加减，但不是显示 100、200、300，而是只显示 1、2、3。 <div class="second-booking-container"> <div> <div class="second-booking-container-image"><img src="./img/shirt.png" /></div> <p class="second-booking-container-icon" name="product" value="100" id="qnty_1"> Shirt(s)</p> <p> <button type="button" class="sub" data- target="shirt">-</button> <input type="text" value="0" class="field_shirt" /> <button type="button" class="add" data-target=" shirt">+</button> <p class="display_shirt" name="price" max="3" min="1">₦ 100</p> </p> </div> <div> <div class="second-booking-container-image"><img src="./img/trouser.png" /></div> <p class="second-booking-container-icon" name="product" value="100" id="qnty_2"> Trouser(s)</p> <div> <p> <button type="button" class="sub" data- target="trousers">−</button> <input type="text" value="0" class="field_trousers" /> <button type="button" class="add" data- target="trousers">+</button> <p class="display_trousers" name="price" max="3" min="1">₦ 虽然当我点击加号或减号按钮时，它会在我加一次时自动加或减 100 或当我单击减号按钮一个时会自动加减 100，但它显示 1 而不是 100，我希望它显示 100、200 , 300
1 回答
开满天机
TA贡献1786条经验 获得超13个赞
关于这条线：
var totalValueElm = document.getElementById('totalValue');
在您提供的 HTML 中，您没有 id 为 totalValue 的元素。因此，下面的行不会做任何事情。
totalValueElm.innerText = Number(totalValueElm.innerText) + 100;
如果您添加一个 id="totalValue" 的元素，那么您的代码应该可以正常工作。（见下文）
<body>
<div class="second-booking-container">
<div>
<div class="second-booking-container-image">
<img src="./img/shirt.png" />
</div>
<p class="second-booking-container-icon" name="product" value="100" id="qnty_1">
Shirt(s)</p>
<p>
<button type="button" class="sub" data-target="shirt">-</button>
<input type="text" value="0" class="field_shirt" />
<button type="button" class="add" data-target="shirt">+</button>
<p class="display_shirt" name="price" max="3" min="1">₦ 100</p>
</p>
</div>
<div>
<div class="second-booking-container-image">
<img src="./img/trouser.png" />
</div>
<p class="second-booking-container-icon" name="product" value="100" id="qnty_2">
Trouser(s)</p>
<div>
<p>
<button type="button" class="sub" data-target="trousers">−</button>
<input type="text" value="0" class="field_trousers" />
<button type="button" class="add" data-target="trousers">+</button>
<p class="display_trousers" name="price" max="3" min="1">₦ 0
</p>
</p>
</div>
</div>
<div id='totalValue'></div>
<script>
var subElm = document.querySelectorAll('.sub');
var addElm = document.querySelectorAll('.add');
var totalValueElm = document.getElementById('totalValue');
for (var i = 0; i < subElm.length; i++) {
subElm[i].addEventListener('click', function() {
var targetItem = this.getAttribute('data-target');
var inputElm = document.querySelector('.field_' +
targetItem);
var displayElm = document.querySelector('.display_' +
targetItem);
var currentValue = +inputElm.getAttribute('value');
if (currentValue !== 0) {
var incValue = currentValue - 1;
var strValue = ' ' + incValue;
inputElm.setAttribute('value', incValue);
displayElm.innerHTML = "₦" + strValue;
totalValueElm.innerText = Number(totalValueElm.innerText) - 100;
}
});
addElm[i].addEventListener('click', function() {
var targetItem = this.getAttribute('data-target');
var inputElm = document.querySelector('.field_' + targetItem);
var displayElm = document.querySelector('.display_' +
targetItem);
var currentValue = +inputElm.getAttribute('value');
var incValue = currentValue + 1;
var strValue = ' ' + incValue;
inputElm.setAttribute('value', incValue);
displayElm.innerHTML = "₦" + strValue;
totalValueElm.innerText = Number(totalValueElm.innerText) + 100;
});
}
</script>
如果您还需要“₦ 0”部分显示为 100 的倍数，您可以更改此行
displayElm.innerHTML = "₦" + strValue;
对此：
displayElm.innerHTML = "₦ " + incValue * 100;
<div class="second-booking-container">
<div>
<div class="second-booking-container-image">
<img src="./img/shirt.png" />
</div>
<p class="second-booking-container-icon" name="product" value="100" id="qnty_1">
Shirt(s)</p>
<p>
<button type="button" class="sub" data-target="shirt">-</button>
<input type="text" value="0" class="field_shirt" />
<button type="button" class="add" data-target="shirt">+</button>
<p class="display_shirt" name="price" max="3" min="1">₦ 100</p>
</p>
</div>
<div>
<div class="second-booking-container-image">
<img src="./img/trouser.png" />
</div>
<p class="second-booking-container-icon" name="product" value="100" id="qnty_2">
Trouser(s)</p>
<div>
<p>
<button type="button" class="sub" data-target="trousers">−</button>
<input type="text" value="0" class="field_trousers" />
<button type="button" class="add" data-target="trousers">+</button>
<p class="display_trousers" name="price" max="3" min="1">₦ 0
</p>
</p>
</div>
</div>
<div id='totalValue'></div>
<script>
var subElm = document.querySelectorAll('.sub');
var addElm = document.querySelectorAll('.add');
var totalValueElm = document.getElementById('totalValue');
for (var i = 0; i < subElm.length; i++) {
subElm[i].addEventListener('click', function() {
var targetItem = this.getAttribute('data-target');
var inputElm = document.querySelector('.field_' +
targetItem);
var displayElm = document.querySelector('.display_' +
targetItem);
var currentValue = +inputElm.getAttribute('value');
if (currentValue !== 0) {
var incValue = currentValue - 1;
inputElm.setAttribute('value', incValue);
displayElm.innerHTML = "₦ " + incValue * 100;
totalValueElm.innerText = Number(totalValueElm.innerText) - 100;
}
});
addElm[i].addEventListener('click', function() {
var targetItem = this.getAttribute('data-target');
var inputElm = document.querySelector('.field_' + targetItem);
var displayElm = document.querySelector('.display_' +
targetItem);
var currentValue = +inputElm.getAttribute('value');
var incValue = currentValue + 1;
inputElm.setAttribute('value', incValue);
displayElm.innerHTML = "₦ " + incValue * 100;
totalValueElm.innerText = Number(totalValueElm.innerText) + 100;
});
}
</script>
添加回答
举报
0/150
提交
取消