用于计算文本输入字段值的 Javascript

Question

我正在尝试创建一个带有我已经设置的增量计数器的酒店预订表格。 它有 3 个输入字段，最后有一个“组总数”文本输入字段。 我需要问是否有人可以帮助我使用 JS 来计算总组框中的人数，以便他们在 3 个增量计数器中增量添加人员时？

我的代码如下：

 function increase() { var a = 1; var textbox = document.getElementById("text"); textbox.value++; } function decrease() { var textBox = document.getElementById("text"); textBox.value--; } function increase2() { var a = 1; var textbox2 = document.getElementById("text2"); textbox2.value++; } function decrease2() { var textBox2 = document.getElementById("text2"); textBox2.value--; } function increase3() { var a = 1; var textbox3 = document.getElementById("text3"); textbox3.value++; } function decrease3() { var textBox3 = document.getElementById("text3"); textBox3.value--; }

 <h4>Please select the number of people who will be in each room</h4> <div class="cart-plus-minus"> <button type="button" onclick="decrease()">-</button> <input type="text" id="text" value="1" min="1" data-max="2" readonly> <button type="button" onclick="increase()">+</button> </div> <div class="cart-plus-minus"> <button type="button" onclick="decrease2()">-</button> <input type="text" id="text2" value="1" min="1" max="2" readonly> <button type="button" onclick="increase2()">+</button> </div> <div class="cart-plus-minus"> <button type="button" onclick="decrease3()">-</button> <input type="text" id="text3" value="1" min="1" max="2" readonly> <button type="button" onclick="increase3()">+</button> </div> <a href="" class="a-link"> <label> Group Total: </label> <input id="totalPersons" type="text" placeholder="" value=""> </a>

Answer 1

您也可以在increase / decrease方法中increase / decrease totalpersons元素的value属性。

例如：

function increase() {
  var a = 1;

  var textbox = document.getElementById("text");
  var totalpersons = document.getElementById("totalPersons");
  textbox.value++;
  totalpersons.value++; 
}

Answer 2

请注意，文本框的值在 javascript 中始终是字符串。 parseInt() 函数会将它们转换为整数。

https://jsfiddle.net/y473L1bt/2/

function updateTotal() {
  var textbox = document.getElementById("text");
  var textbox2 = document.getElementById("text2");
  var textbox3 = document.getElementById("text3");
  var total = document.getElementById("totalPersons");
  total.value = parseInt(textbox.value) + 
  parseInt(textbox2.value) + parseInt(textbox3.value);
}

function increase(id) {
  var textbox = document.getElementById(id);
  textbox.value++;
  updateTotal();
}


function decrease(id) {
  var textBox = document.getElementById(id);
  var a = textBox.value - 1;
  if (a >= 0) {
    textBox.value = a;
  }
   updateTotal();
}

Answer 3

您可以通过添加简化代码this给所有onclick函数调用，所以我们可以知道哪个元素调用的函数，用我们可以用正确的输入元素增加而计算出它的母公司。 最后我们调用increaseTotal()或decreaseTotal()函数来更新组总计字段。

注意：我猜您不希望将字段减少到 0 以上，因此我将该约束添加为decrease()函数中的 if 语句。 我还将totalPersons输入字段的值设为默认为 3，因为所有其他 3 个输入都默认为 1。

运行和测试：

 function increase(el) { var textbox = el.parentElement.querySelector('input'); textbox.value++; increaseTotal(); } function decrease(el) { var textBox = el.parentElement.querySelector('input'); if(textBox.value > 0) { // <- if value is at least 1 textBox.value--; decreaseTotal(); } } function increaseTotal() { var textBox = document.getElementById("totalPersons"); textBox.value++; } function decreaseTotal() { var textBox = document.getElementById("totalPersons"); textBox.value--; }

 <h4>Please select the number of people who will be in each room</h4> <div class="cart-plus-minus"> <button type="button" onclick="decrease(this)">-</button> <input type="text" id="text" value="1" min="1" data-max="2" readonly> <button type="button" onclick="increase(this)">+</button> </div> <div class="cart-plus-minus"> <button type="button" onclick="decrease(this)">-</button> <input type="text" id="text2" value="1" min="1" max="2" readonly> <button type="button" onclick="increase(this)">+</button> </div> <div class="cart-plus-minus"> <button type="button" onclick="decrease(this)">-</button> <input type="text" id="text3" value="1" min="1" max="2" readonly> <button type="button" onclick="increase(this)">+</button> </div> <a href="" class="a-link"> <label> Group Total: </label> <input id="totalPersons" type="text" placeholder="" value="3"> </a>