javascript - 添加减号和加号按钮

Question

我有一个预订 HTML 页面，用户可以在其中登录并预订洗衣服务，最初我做了选项样式，用户点击下拉菜单按钮并在 1-4 之间选择要洗涤和熨烫的衣服数量，如果用户选择2条裤子、2条衬衫、3条裙子、4条套装。这会自动计算要支付的全部金额并将其加起来，但是现在我被告知要添加这个加号和减号按钮功能，它弄乱了我的代码库的总数，我不知道如何去做。

我尝试了 1-5 的下拉菜单，它确实总结了所有内容。但是对于这个加号和减号，根本就没有....

这是 HTML 文件，如您所见，我使用了下拉菜单和选项标签，以便每个用户都可以在 0 到 4 之间点击作为要洗的衣服数量，但现在我想将其更改为具有LHS 和 RHS 减号和加号

//target select element based on 'id' and store as a variable
let first = document.querySelector('#first');
let second = document.querySelector('#second');
let third = document.querySelector('#third');
let fourth = document.querySelector('#fourth');
let fifth = document.querySelector('#fifth');

//invoke this function when the input changes on individual selected elements
const totalItem = () => {
  let firstValue = `${first.options[first.selectedIndex].value}`
  let secondValue = `${second.options[second.selectedIndex].value}`
  let thirdValue = `${third.options[third.selectedIndex].value}`
  let fourthValue = `${fourth.options[fourth.selectedIndex].value}`
  let fifthValue = `${fifth.options[fifth.selectedIndex].value}`
  console.table(firstValue, secondValue, thirdValue, fourthValue,
    fifthValue)

  //call function for each cloths and pass 3 values(the selected number, the constant(₦100) and where to update)
  multiplySelectedwithConstVal(firstValue, firstValNo, firstVal);
  multiplySelectedwithConstVal(secondValue, secondValNo, secondVal);
  multiplySelectedwithConstVal(thirdValue, thirdValNo, thirdVal);
  multiplySelectedwithConstVal(fourthValue, fourthValNo, fourthVal);
  multiplySelectedwithConstVal(fifthValue, fifthValNo, fifthVal);

  //total addition of all values
  let selectedValArray = [];

  const total = () => {
    selectedValArray.push(
      parseInt(firstVal.innerHTML.replace("₦", "")),
      parseInt(secondVal.innerHTML.replace("₦", "")),
      parseInt(thirdVal.innerHTML.replace("₦", "")),
      parseInt(fourthVal.innerHTML.replace("₦", "")),
      parseInt(fifthVal.innerHTML.replace("₦", ""))
    );
    return selectedValArray.reduce((accu, currentVal) => accu +
      currentVal, 0);
  }
  finalVal.innerHTML = `Total: <span>&#8358;${total()}</span>`
  // console.log(total());
}

//target elements that will be updated and
let firstVal = document.querySelector('#firstVal');
let secondVal = document.querySelector('#secondVal');
let thirdVal = document.querySelector('#thirdVal');
let fourthVal = document.querySelector('#fourthVal');
let fifthVal = document.querySelector('#fifthVal');
let finalVal = document.querySelector('#total');

//convert ₦100 to number for multiplication
//converted the innerhtml to number
let firstValNo = parseInt(firstVal.innerHTML.replace("₦", ""));
let secondValNo = parseInt(secondVal.innerHTML.replace("₦", ""));
let thirdValNo = parseInt(thirdVal.innerHTML.replace("₦", ""));
let fourthValNo = parseInt(fourthVal.innerHTML.replace("₦", ""));
let fifthValNo = parseInt(fifthVal.innerHTML.replace("₦", ""));


//multiply selected value with constant and update
const multiplySelectedwithConstVal = (i, k, update) => {
  let result = parseInt(i) * k
  return update.innerHTML = `₦${result}`
}

<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>
    <!-- <select onchange='totalItem()' class="center" 
                  id="first"> -->
    <button type="button" id="sub" class="sub">−</button>
    <input type="text" id="1" value="0" class="field" />
    <button type="button" id="add" class="add">+</button>

    <!-- <option>0</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                      <option>4</option> -->
    <!-- </select> -->
    <FontAwesomeIcon class="select-long-icon" icon="chevron- 
                down" />
    <p class="second-booking-container-text" id='firstVal' name="price" max="3" min="1">&#8358;100</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>
    <!-- <select onchange='totalItem()' class="center" 
                id="second">
                      <option>0</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                  </select> -->
    <button type="button" id="sub" class="sub">−</button>
    <input type="text" id="1" value="0" class="field" />
    <button type="button" id="add" class="add">+</button>
    <FontAwesomeIcon class="select-long-icon" icon="chevron- 
                down" />
    <p class="second-booking-container-text" id="secondVal" name="price" max="3" min="1">&#8358;100</p>
  </div>

  <div>
    <div class="second-booking-container-image"><img src="./img/skirt.png" /></div>
    <p class="second-booking-container-icon" name="product" value="100" id="qnty_3">
      Skirt(s)</p>
    <!-- <select onchange='totalItem()' class="center" 
                  id="third">
                      <option>0</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                  </select> -->
    <button type="button" id="sub" class="sub">−</button>
    <input type="text" id="1" value="0" class="field" />
    <button type="button" id="add" class="add">+</button>
    <FontAwesomeIcon class="select-long-icon" icon="chevron- 
                   down" />
    <p class="second-booking-container-text" id="thirdVal" name="price" max="3" min="1">&#8358;100</p>
  </div>

  <div>
    <div class="second-booking-container-image"><img src="./img/blouse.png" /></div>
    <p class="second-booking-container-icon" name="product" value="100" id="qnty_4">
      Blouse(s)</p>
    <!-- <select onchange='totalItem()' class="center" 
               id="fourth">
                      <option>0</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                  </select> -->
    <button type="button" id="sub" class="sub">−</button>
    <input type="text" id="1" value="0" class="field" />
    <button type="button" id="add" class="add">+</button>
    <FontAwesomeIcon class="select-long-icon" icon="chevron- 
            down" />
    <p class="second-booking-container-text" id="fourthVal" name="price" max="3" min="1">&#8358;100</p>
  </div>

  <div>
    <div class="second-booking-container-image"><img src="./img/jacket.png" /></div>
    <p class="second-booking-container-icon-long" name="product" value="100" id="qnty_5">Suit/Jacket(s)
    </p>
    <!-- <select onchange='totalItem()' class="center" 
              id="fifth">
                      <option>0</option>
                      <option>1</option>
                      <option>2</option>
                      <option>3</option>
                  </select> -->
    <button type="button" id="sub" class="sub">−</button>
    <input type="text" id="1" value="0" class="field" />
    <button type="button" id="add" class="add">+</button>
    <FontAwesomeIcon class="select-long-icon" icon="chevron- 
               down" />
    <p class="second-booking-container-text" id="fifthVal" name="price" max="3" min="1">&#8358;100</p>
  </div>
</div>

<div class="third-booking-container">
  <p id="total">Total: <span>&#8358;0.00</span></p>
  <button>Set pick up date
    <FontAwesomeIcon class="second-container-button-right" icon="angle-right" /></button>
</div>
</div>


<script src="main.js"></script>
</body>

</html>

我希望按钮可以工作，即加号和减号按钮，然后它应该能够计算总金额

Answer 1

很有帮助

请查看https://jsfiddle.net/forfiddle/yft2c637/

我认为这是您的完整解决方案，只需更新您的 html 并添加您想要的类别，例如 shirt, trouser在 data-target和 class name