如何修复加号和减号按钮
我有一个加减按钮，可以从用户要支付的总金额中加减，但不是显示 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
拉丁的传说浏览 187回答 1
1回答
-
开满天机
关于这条线：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>
随时随地看视频慕课网APP
相关分类
JavaScript