使用 javascript 启用/禁用提交按钮 - 根据用户在 HTML 中输入的所有数字的总和

Question

我想根据用户添加到输入中的数字总和来禁用/启用提交按钮。如果总和变为 100，则应启用提交按钮，否则如果总和！=100，则应禁用它，如果单击它，则警告“总和不是 100”。我写了以下代码。但它不起作用。你能帮帮我吗

var total = 0;
        function manage(value){
            var n1= parseInt(document.getElementById("validationDefault02").value);
            var n2= parseInt(document.getElementById("validationDefault04").value);
            var n3= parseInt(document.getElementById("validationDefault06").value);
            var bt=document.getElementById("btn");
             total += n1+n2+n3;
            if(total != 100){
                bt.disabled = true;
                
            }
            else{
                bt.disabled = false;
            }
        }

<input type="number"  class="form-control" name="value" id="validationDefault02" placeholder="%" required onkeyup="manage(this)"><br>

<input type="number"  class="form-control" name="value" id="validationDefault04" placeholder="%" required onkeyup="manage(this)"><br>

<input type="number"  class="form-control" name="value" id="validationDefault06" placeholder="%" required onkeyup="manage(this)"><br>

  <button class="quebtn1" type="submit" id="btn"  disabled >Next</button>

Answer 1

在运行parseInt()之前需要检查值是否为空。否则，它将返回NaN 并阻止您计算总数。

要显示警报，请尝试 alert() 函数。例如。 alert("Testing Testing");。我会让你玩它：D

function manage(value) {
  var total = 0;
  var bt = document.getElementById("btn");
  var n1 = document.getElementById("validationDefault02");
  var n2 = document.getElementById("validationDefault04");
  var n3 = document.getElementById("validationDefault06");

  // If empty, use 0
  total += n1.value ? parseInt(n1.value) : 0;
  total += n2.value ? parseInt(n2.value) : 0;
  total += n3.value ? parseInt(n3.value) : 0;
  
  console.log(total);
  
  if (total != 100) {
    bt.disabled = true;

  } else {
    bt.disabled = false;
  }
}

<input type="number" class="form-control" name="value" id="validationDefault02" placeholder="%" required onkeyup="manage(this)"><br>

<input type="number" class="form-control" name="value" id="validationDefault04" placeholder="%" required onkeyup="manage(this)"><br>

<input type="number" class="form-control" name="value" id="validationDefault06" placeholder="%" required onkeyup="manage(this)"><br>

<button class="quebtn1" type="submit" id="btn" disabled>Next</button>

Answer 2

我得到了页面中的所有输入并监听了一个更改事件

const inputs = [...document.querySelectorAll('input')]; // Specify your selector. 

inputs.forEach(input => {
    input.addEventListener('change', () => {
        const total = inputs.map(input => +input.value || 0).reduce((a, b) => a + b);

        if (total != 100) {
            bt.disabled = true;
            alert('The sum is not 100');
        } else bt.disabled = false;
    });
});

HTML 可能没有 onkeyup

<input type="number"  class="form-control" name="value" id="validationDefault02" placeholder="%" required><br>

<input type="number"  class="form-control" name="value" id="validationDefault04" placeholder="%" required><br>

<input type="number"  class="form-control" name="value" id="validationDefault06" placeholder="%" required><br>

<button class="quebtn1" type="submit" id="btn" disabled>Next</button>

Answer 3

如果您想显示alert("the sum is not 100")，您应该始终启用该按钮。

在按钮点击事件上，获取总值，并进行相应处理；

function onButton(e){
console.log(1);

    // Prevent button handler
    e.preventDefault();

    // Get all iputs
    const inputs = document.getElementsByClassName("form-control");
    
    // Get total value
    let total = 0;
    for(var i=0; i < inputs.length; i++){
        total = total + (inputs[i].value ? parseInt(inputs[i].value) : 0)
    }
    console.log('New total: ', total);
    
    // Get button
    var bt = document.getElementById("btn");
    
    // If total < 100, show warning
    if (total < 100) {
      alert('Total must be > 100');
    } else {
    
        // Click button / Prevorm button action
        bt.click();
        console.log('Button Clicked');
    }
}

<input type="number"  class="form-control" name="value" id="validationDefault02" placeholder="%" required><br>

<input type="number"  class="form-control" name="value" id="validationDefault04" placeholder="%" required><br>

<input type="number"  class="form-control" name="value" id="validationDefault06" placeholder="%" required><br>

<button class="quebtn1" type="submit" id="btn" onClick="onButton(event)">Next</button>