Question

我有一个加号和减号按钮，它从用户要支付的总额中减去和加号，但是没有显示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; 
           0</p>
                      </p>
                  </div>
              </div>






          Javascript code 
          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 = "&#8358;" + 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 = "&#8358;" + strValue;
       totalValueElm.innerText = Number(totalValueElm.innerText) + 100;
       });
         }

尽管当我单击添加或减号按钮时，当我添加一次或减号100时，它会自动添加或减号100，或者当我单击减号按钮时单击减号100，但是它希望显示1而不是100，我希望它显示100、200、300

Answer 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">&#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; 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 = "&#8358;" + 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 = "&#8358;" + strValue;
        totalValueElm.innerText = Number(totalValueElm.innerText) + 100;
    });

}
</script>

如果您还需要“₦0”部分显示为100的倍数，则可以更改此行

displayElm.innerHTML = "&#8358;" + strValue;

对此：

displayElm.innerHTML = "&#8358; " + 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">&#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; 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 = "&#8358; " + 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 = "&#8358; " + incValue * 100;
        totalValueElm.innerText = Number(totalValueElm.innerText) + 100;
    });

}
</script>

如何修复加号和减号按钮

1 个答案: