加减号和加号按钮

时间：2019-07-30 07:24:41

标签： javascript

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

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

这是HTML文件，如您所见，我使用了dropdown和option标签，以便每个用户可以在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>

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

1 个答案:

答案 0 :(得分：0)

可能会有帮助

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

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

相关问题
最新问题