猿问

如何修复加号和减号按钮

我有一个加减按钮，可以从用户要支付的总金额中加减，但不是显示 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">&#8358; 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">&#8358; 


虽然当我点击加号或减号按钮时，它会在我加一次时自动加或减 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">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="second-booking-container-image">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="./img/shirt.png" />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="second-booking-container-icon" name="product" value="100" id="qnty_1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Shirt(s)</p>&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="sub" data-target="shirt">-</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" value="0" class="field_shirt" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="add" data-target="shirt">+</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="display_shirt" name="price" max="3" min="1">&#8358; 100</p>&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="second-booking-container-image">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="./img/trouser.png" />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="second-booking-container-icon" name="product" value="100" id="qnty_2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Trouser(s)</p>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="sub" data-target="trousers">−</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" value="0" class="field_trousers" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="add" data-target="trousers">+</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="display_trousers" name="price" max="3" min="1">&#8358; 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; <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++) {&nbsp; &nbsp; subElm[i].addEventListener('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; var targetItem = this.getAttribute('data-target');&nbsp; &nbsp; &nbsp; &nbsp; var inputElm = document.querySelector('.field_' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; targetItem);&nbsp; &nbsp; &nbsp; &nbsp; var displayElm = document.querySelector('.display_' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; targetItem);&nbsp; &nbsp; &nbsp; &nbsp; var currentValue = +inputElm.getAttribute('value');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if (currentValue !== 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var incValue = currentValue - 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var strValue = ' ' + incValue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputElm.setAttribute('value', incValue);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; displayElm.innerHTML = "&#8358;" + strValue;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; totalValueElm.innerText = Number(totalValueElm.innerText) - 100;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; addElm[i].addEventListener('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; var targetItem = this.getAttribute('data-target');&nbsp; &nbsp; &nbsp; &nbsp; var inputElm = document.querySelector('.field_' + targetItem);&nbsp; &nbsp; &nbsp; &nbsp; var displayElm = document.querySelector('.display_' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; targetItem);&nbsp; &nbsp; &nbsp; &nbsp; var currentValue = +inputElm.getAttribute('value');&nbsp; &nbsp; &nbsp; &nbsp; var incValue = currentValue + 1;&nbsp; &nbsp; &nbsp; &nbsp; var strValue = ' ' + incValue;&nbsp; &nbsp; &nbsp; &nbsp; inputElm.setAttribute('value', incValue);&nbsp; &nbsp; &nbsp; &nbsp; displayElm.innerHTML = "&#8358;" + strValue;&nbsp; &nbsp; &nbsp; &nbsp; totalValueElm.innerText = Number(totalValueElm.innerText) + 100;&nbsp; &nbsp; });}</script>如果您还需要“₦ 0”部分显示为 100 的倍数，您可以更改此行displayElm.innerHTML = "&#8358;" + strValue;对此：displayElm.innerHTML = "&#8358; " + incValue * 100;<div class="second-booking-container">&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="second-booking-container-image">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="./img/shirt.png" />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="second-booking-container-icon" name="product" value="100" id="qnty_1">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Shirt(s)</p>&nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="sub" data-target="shirt">-</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" value="0" class="field_shirt" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="add" data-target="shirt">+</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="display_shirt" name="price" max="3" min="1">&#8358; 100</p>&nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="second-booking-container-image">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="./img/trouser.png" />&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <p class="second-booking-container-icon" name="product" value="100" id="qnty_2">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Trouser(s)</p>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="sub" data-target="trousers">−</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" value="0" class="field_trousers" />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="add" data-target="trousers">+</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <p class="display_trousers" name="price" max="3" min="1">&#8358; 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; <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++) {&nbsp; &nbsp; subElm[i].addEventListener('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; var targetItem = this.getAttribute('data-target');&nbsp; &nbsp; &nbsp; &nbsp; var inputElm = document.querySelector('.field_' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; targetItem);&nbsp; &nbsp; &nbsp; &nbsp; var displayElm = document.querySelector('.display_' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; targetItem);&nbsp; &nbsp; &nbsp; &nbsp; var currentValue = +inputElm.getAttribute('value');&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; if (currentValue !== 0) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var incValue = currentValue - 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; inputElm.setAttribute('value', incValue);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; displayElm.innerHTML = "&#8358; " + incValue * 100;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; totalValueElm.innerText = Number(totalValueElm.innerText) - 100;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; &nbsp; addElm[i].addEventListener('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; var targetItem = this.getAttribute('data-target');&nbsp; &nbsp; &nbsp; &nbsp; var inputElm = document.querySelector('.field_' + targetItem);&nbsp; &nbsp; &nbsp; &nbsp; var displayElm = document.querySelector('.display_' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; targetItem);&nbsp; &nbsp; &nbsp; &nbsp; var currentValue = +inputElm.getAttribute('value');&nbsp; &nbsp; &nbsp; &nbsp; var incValue = currentValue + 1;&nbsp; &nbsp; &nbsp; &nbsp; inputElm.setAttribute('value', incValue);&nbsp; &nbsp; &nbsp; &nbsp; displayElm.innerHTML = "&#8358; " + incValue * 100;&nbsp; &nbsp; &nbsp; &nbsp; totalValueElm.innerText = Number(totalValueElm.innerText) + 100;&nbsp; &nbsp; });}</script>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答