使用 JS 函数验证数字时遇到问题

问题描述 投票：0回答：1

首先，我不是专业人士。这是一个个人项目，如果我的术语或问题的观点有误，请道歉。我正在开发一种特殊的计算器，需要用户输入才能进行计算。该计算器由多个表格组成，但第一个表格是最重要的。它只需要用户将单个“单位”划分为将在计算器的其余部分中使用的比率。这些数字必须等于 100，否则其余输出将不正确。

我希望“TOTAL (%)”有一个函数来检查文本框中计算的数字是否等于 100。如果不等于 100，我希望该数字变成红色并带有警告。

我遇到的问题是该功能似乎不起作用。我的结论是，这可能是以下一个或多个原因：

  1. 该函数根本无法按照编写的那样工作。
  2. 该函数未在正确的元素上触发。
  3. 该功能未由正确的事件触发。

这是我编写的代码：

function valTotal() {
  var x = document.getElementById('t1total').value;
  var y = 100;

  if (x > y) {
    alert("Warning! Your total is greater than 100%. Please adjust your ratios above so that the total equals 100% before continuing.");
    x.style.color = "#cf0911";
    return false;
  }
}

function myFun0() {
  let water = document.getElementById('t1water').value;
  let ingr1 = document.getElementById('t1ingr1').value;
  let ingr2 = document.getElementById('t1ingr2').value;
  let ingr3 = document.getElementById('t1ingr3').value;
  let ingr4 = document.getElementById('t1ingr4').value;
  let ingr5 = document.getElementById('t1ingr5').value;
  let ingr6 = document.getElementById('t1ingr6').value;
  let total = Number(water) + Number(ingr1) + Number(ingr2) + Number(ingr3) + Number(ingr4) + Number(ingr5) + Number(ingr6);

  document.getElementById("t1total").value = total;
}
body {
  font-family: monospace;
}

table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

.invis {
  border-style: hidden;
}

.txcenter {
  text-align: center;
}

.txbox1 {
  width: 50px;
}
<!DOCTYPE html>
<html>

<head>


</head>
<!--Calculator-->

<body>
  <div>
    <h2 id="calc">Substrate Calculator</h2>
    <table class="invis">
      <tr>
        <td>
          <!--Table 1: SUB RATIO-->
          <table style="float: left">
            <tr style="background-color:#751e0b">
              <td colspan="2">
                <div class="txcenter">
                  <b style="color:white">SUB RATIO</b>
                </div>
              </td>
            </tr>
            <!--Table 1: SUB RATIO > Water (%)-->
            <tr>
              <td>
                <div>Water (%)</div>
              </td>
              <td>
                <input class="txbox1" type="textbox" id="t1water" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
              </td>
            </tr>
            <!--Table 1: SUB RATIO > Ingredient 1 (%)-->
            <tr>
              <td>
                <div>Ingredient 1 (%)</div>
              </td>
              <td>
                <input class="txbox1" type="textbox" id="t1ingr1" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
              </td>
            </tr>
            <!--Table 1: SUB RATIO > Ingredient 2 (%)-->
            <tr>
              <td>
                <div>Ingredient 2 (%)</div>
              </td>
              <td>
                <input class="txbox1" type="textbox" id="t1ingr2" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
              </td>
            </tr>
            <!--Table 1: SUB RATIO > Ingredient 3 (%)-->
            <tr>
              <td>
                <div>Ingredient 3 (%)</div>
              </td>
              <td>
                <input class="txbox1" type="textbox" id="t1ingr3" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
              </td>
            </tr>
            <!--Table 1: SUB RATIO > Ingredient 4 (%)-->
            <tr>
              <td>
                <div>Ingredient 4 (%)</div>
              </td>
              <td>
                <input class="txbox1" type="textbox" id="t1ingr4" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
              </td>
            </tr>
            <!--Table 1: SUB RATIO > Ingredient 5 (%)-->
            <tr>
              <td>
                <div>Ingredient 5 (%)</div>
              </td>
              <td>
                <input class="txbox1" type="textbox" id="t1ingr5" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
              </td>
            </tr>
            <!--Table 1: SUB RATIO > Ingredient 6 (%)-->
            <tr>
              <td>
                <div>Ingredient 6 (%)</div>
              </td>
              <td>
                <input class="txbox1" type="textbox" id="t1ingr6" onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()">
              </td>
            </tr>
            <!--Table 1: SUB RATIO > TOTAL (%)-->
            <tr>
              <td>
                <div>TOTAL (%)</div>
              </td>
              <td>
                <input class="txbox1" type="textbox" id="t1total" onchange="valTotal()" readonly>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</body>

</html>

只是计算器的第一个表格。我遇到的问题是“TOTAL (%)”字段，这是唯一使用验证函数的地方。

非常感谢。

编辑：有问题的函数是 valTotal() 函数。

javascript html
1个回答
0
投票

您的代码中有一些错误。

  1. 在函数 valTotal 

    var x = document.getElementById('t1total');
    中，使用此行您将获取元素本身而不是其值。因此，要在最后遇到这种情况，您应该执行
    var x = document.getElementById('t1total').value;
    ，这就是验证无法正常工作的原因。将来请执行 
    console.log
    检查您是否获得了您想要的值。

  2. 在 if 语句中，您也更改了 x 的颜色，因此也可以使用 else 语句将其恢复回来 

      if (x > y) { alert("Warning! Your total is greater than 100%. Please adjust your ratios above so that the total equals 100% before continuing."); x.style.color = "#cf0911"; return false;
    }else { document.getElementById('t1total').style.color = "";  // Reset color if valid }

    如果您之前设置了颜色（例如，红色表示错误状态），这会将其重置回默认值。

  3. 在函数 myFun0 中调用 valTotal 函数，因此在输入下一个成分之前，如果它超过 100%，您可以获得。

     function myFun0(){

    // rest of the code

    valTotal()

    }

  4. 现在在输入的html中

    type = "textbox"
    没有这样的东西使用
    type = "text"
    或者代替使用
    number
    并且在您调用的所有输入上
    onkeyup="myFun0();myFun1();myFun2()" onchange="myFun0();myFun1();myFun2()"
    所以首先 
    onkeyup
    和 
    onchange
    都在做同样的事情，调用相同的函数，所以你可以只使用其中一个，你也可以通过这个链接 onkeyup onchnage 阅读它们。您正在调用的另一个函数甚至没有写在您的代码中。只需对所有输入执行 
    <input class="txbox1" type="text" id="t1water" onkeyup="myFun0()">
    即可。

    总计无需调用 

    onchange = "valTotal()"
    ，因为每次按键都会计算总计。

希望这对您有帮助。

function valTotal() {
      var x = document.getElementById('t1total').value;
      var y = 100;

      // Convert the value to a number for comparison
      if (Number(x) > y) {
        alert("Warning! Your total is greater than 100%. Please adjust your ratios above so that the total equals 100% before continuing.");
        document.getElementById('t1total').style.color = "#cf0911";  // Change color to red
        return false;
      } else {
        document.getElementById('t1total').style.color = "";  // Reset color if valid
      }
    }

    function myFun0() {
      let water = document.getElementById('t1water').value;
      let ingr1 = document.getElementById('t1ingr1').value;
      let ingr2 = document.getElementById('t1ingr2').value;
      let ingr3 = document.getElementById('t1ingr3').value;
      let ingr4 = document.getElementById('t1ingr4').value;
      let ingr5 = document.getElementById('t1ingr5').value;
      let ingr6 = document.getElementById('t1ingr6').value;

      // Calculate the total sum of all ingredient values
      let total = Number(water) + Number(ingr1) + Number(ingr2) + Number(ingr3) + Number(ingr4) + Number(ingr5) + Number(ingr6);

      // Display the result in t1total
      document.getElementById("t1total").value = total;

      // Call valTotal to check if the total exceeds 100%
      valTotal();
    }
<!DOCTYPE html>
<html>

<head>
  <title>Substrate Calculator</title>
</head>

<body>
  <div>
    <h2 id="calc">Substrate Calculator</h2>
    <table class="invis">
      <tr>
        <td>
          <!-- Table 1: SUB RATIO -->
          <table style="float: left;">
            <tr style="background-color:#751e0b;">
              <td colspan="2">
                <div class="txcenter">
                  <b style="color:white;">SUB RATIO</b>
                </div>
              </td>
            </tr>

            <!-- Input rows -->
            <tr>
              <td>Water (%)</td>
              <td><input class="txbox1" type="text" id="t1water" onkeyup="myFun0()"></td>
            </tr>
            <tr>
              <td>Ingredient 1 (%)</td>
              <td><input class="txbox1" type="text" id="t1ingr1" onkeyup="myFun0()"></td>
            </tr>
            <tr>
              <td>Ingredient 2 (%)</td>
              <td><input class="txbox1" type="text" id="t1ingr2" onkeyup="myFun0()"></td>
            </tr>
            <tr>
              <td>Ingredient 3 (%)</td>
              <td><input class="txbox1" type="text" id="t1ingr3" onkeyup="myFun0()"></td>
            </tr>
            <tr>
              <td>Ingredient 4 (%)</td>
              <td><input class="txbox1" type="text" id="t1ingr4" onkeyup="myFun0()"></td>
            </tr>
            <tr>
              <td>Ingredient 5 (%)</td>
              <td><input class="txbox1" type="text" id="t1ingr5" onkeyup="myFun0()"></td>
            </tr>
            <tr>
              <td>Ingredient 6 (%)</td>
              <td><input class="txbox1" type="text" id="t1ingr6" onkeyup="myFun0()"></td>
            </tr>

            <!-- Total row -->
            <tr>
              <td>TOTAL (%)</td>
              <!-- because of okKeyup the total is calculating on everykeyup no need to call function here -->
              <td><input class="txbox1" type="text" id="t1total" readonly></td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
  
  </body>
  </html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.