用於計算文本輸入字段值的 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>