提升JavaScript表单验证与库存计算的准确性

function findTotal() {
  var stock = document.getElementsByName('stock'); // 问题：获取的是NodeList
  var arr = document.querySelectorAll('[name="vala"], [name="valb"], [name="valc"]');
  var tot = 0;

  for (var i = 0; i < arr.length; i++) {
    if (parseInt(arr[i].value))
      tot += parseInt(arr[i].value);
  }
  document.getElementById('total').value = tot;

  if ((tot % 50) == 0) {
    document.getElementById('new').value = "correct";
  } else {
    document.getElementById('new').value = "incorrect";
  }
  return tot; // 问题：过早返回，导致后续代码无法执行
  var bal = number(stock - tot); // 问题：number()函数调用不正确
  document.getElementById('balance').value = bal;
  return bal;
}

function ValidateTotal() {
  var y = findTotal(); // 依赖findTotal的返回值
  if ((y % 50) == 0) {
    return true;
  } else {
    alert("Total Must be in multiples of 50");
    return false;
  }
}

function findTotal() {
  // 1. 准确获取库存总量：使用getElementById并获取其值
  // 假设'stock'输入框有唯一的ID 'stock'
  var stockValue = document.getElementById('stock').value;
  // 将库存总量转换为数字，确保计算准确性
  var stock = parseInt(stockValue) || 0; // 使用parseInt并处理NaN情况

  // 获取需要累加的输入项
  var arr = document.querySelectorAll('[name="vala"], [name="valb"], [name="valc"]');
  var tot = 0;

  // 累加各项值
  for (var i = 0; i < arr.length; i++) {
    // 确保输入值是有效数字再进行累加
    if (parseInt(arr[i].value)) {
      tot += parseInt(arr[i].value);
    }
  }

  // 显示总计
  document.getElementById('total').value = tot;

  // 验证总计是否为50的倍数并显示结果
  if ((tot % 50) == 0) {
    document.getElementById('new').value = "correct";
  } else {
    document.getElementById('new').value = "incorrect";
  }

  // 2. 在所有计算完成后再计算和显示余额
  var bal = stock - tot;
  document.getElementById('balance').value = bal;

  // 3. 返回总计（tot），供ValidateTotal函数使用
  // 确保ValidateTotal能获取到正确的总计进行验证
  return tot;
}

function ValidateTotal() {
  // 调用findTotal()获取计算后的总计
  var y = findTotal();
  if ((y % 50) == 0) {
    return true;
  } else {
    alert("Total Must be in multiples of 50");
    return false;
  }
}

<form class="contact100-form validate-form" onsubmit="return ValidateTotal(this)" method="post" action="portal.php" class="simple-form">
  <span class="contact100-form-title">
    Portal <br><span style="color:red;"><span style="font-size: 80%"> Data Submission for '.$datadate.' </red></span></span>
  </span>

  <div class="wrap-input100 validate-input" data-validate="Value 1">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="vala" id="vala" placeholder="Value A">
  </div>
  <div class="wrap-input100 validate-input" data-validate="Value 2">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="valb" id="valb" placeholder="Value B">
  </div>
  <div class="wrap-input100 validate-input" data-validate="Value 3">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="valc" id="valc" placeholder="Value C">
  </div>

  <div class="wrap-input100 validate-input" data-validate="Value 4">
    <input class="input100" type="number" step="1" name="vald" id="vald" placeholder="Value D not in total">
  </div>

  <!-- 注意：HTML中不应有两个id="total"的元素，这里保留原始结构并假设JS会正确处理 -->
  <div class="wrap-input100 validate-input" data-validate="Total">
    <input class="input100" type="number" step="1" name="total" id="total" placeholder="Total ABC">
  </div>

  <div class="wrap-input100 validate-input" data-validate="stock">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="stock" id="stock" placeholder="Total Stock">
  </div>
  <div class="wrap-input100 validate-input" data-validate="balance">
    <input class="input100" onblur="findTotal()" type="number" step="1" name="balance" id="balance" placeholder="balance">
  </div>

  <span style="color:red;">
    Total : <input type="text" name="total" id="total_display" size="2" readonly="readonly"> <!-- 建议为显示总计的readonly input提供一个不同的ID -->
    Validations : <input type="text" name="new" id="new" size="5" readonly="readonly">
  </span>

  <div class="container-contact100-form-btn">
    <button class="contact100-form-btn">Submit</button>
  </div>
</form>