由于编码错误，oninput 和 onchange 无法正常工作答案

【问题标题】：oninput and onchange not working because of bad coding由于编码错误，oninput 和 onchange 无法正常工作
【发布时间】：2019-04-30 03:30:26
【问题描述】：

我的代码是here。以下是 HTML：

<!DOCTYPE html>
<html>
<title>Electricity and Magnetism Demo</title>

<body>
<p>
  <label>Voltage:</label>
  <input id="inputVoltage" type="number" oninput="EqualsVoltage()" onchange="EqualsVoltage()"> </p>

<p>
  <label>Current:</label>
  <input id="inputCurrent" type="number" oninput="EqualsCurrent()" onchange="EqualsCurrent()"> </p>

<p>
  <label>Resistance:</label>
  <input id="inputResistance" type="number" oninput="EqualsResistance()" onchange="EqualsResistance()"> </p>
  <script language="Javascript" type="text/javascript" src="EandM.js"></script>
</body>

</html>

这里是 Javascript：

//Electricity and Magnetism Stuff

function EqualsVoltage() {

    var Voltage = document.getElementById("inputVoltage").value;
    var Current = document.getElementById("inputCurrent").value;
    var Resistance = document.getElementById("inputResistance").value;

    document.getElementById("inputVoltage").value = (Current * Resistance);

}

function EqualsCurrent() {

    var Voltage = document.getElementById("inputVoltage").value;
    var Current = document.getElementById("inputCurrent").value;
    var Resistance = document.getElementById("inputResistance").value;

    document.getElementById("inputCurrent").value = (Voltage / Resistance);

}

function EqualsResistance() {

    var Voltage = document.getElementById("inputVoltage").value;
    var Current = document.getElementById("inputCurrent").value;
    var Resistance = document.getElementById("inputResistance").value;

    document.getElementById("inputResistance").value = (Voltage / Current);

}

我希望我的计算器在我更改文本字段中的值时对 oninput 和 onchange 事件做出反应。

当oninput 和onchange 运行时，我已经能够制作一个将公里转换为英里的转换器；但是，我无法弄清楚这一点。

当我在字段中输入数据时，它不会更改其他值。请帮忙！

【问题讨论】：

不需要将参数传递给对参数不做任何事情的函数
只是语义上的观察——你的一些getElementById 中的 L 是大写的。显然他们不应该。
您在输入电压时也会调用“changeVoltage”，因此，任何新的电压值都将被调用 changeVoltage 覆盖... changeVoltage 应该计算其他两个变量（不知道如何这样做，因为电压的变化会导致电流变化或电阻变化或两者兼而有之）
这个网站有一些很好的简单例子来说明你想要完成的事情。看看——javascriptbank.com/ohm-law-calculator.html
修改了代码。

标签： javascript html

【解决方案1】：

问题：当用户编辑例如输入电压然后计算同时改变输入值（输入值和计算值通常不同）。解决方案：在单独的位置显示输出计算 - 而不是作为输入值。当您使用oninput 时，您不需要使用onchange。

function calc() {
  let c = inputCurrent.value;
  let r = inputResistance.value;
  let v = inputVoltage.value;

  msg.innerHTML = `voltage:    ${ c*r } <br>`
                + `current:    ${ v/r } <br>`
                + `resistance: ${ v/c } <br>`;
}

<p>
  <label>Voltage:</label>
  <input id="inputVoltage" type="number" oninput="calc()">
</p>

<p>
  <label>Current:</label>
  <input id="inputCurrent" type="number" oninput="calc()"> 
</p>

<p>
  <label>Resistance:</label>
  <input id="inputResistance" type="number" oninput="calc()"> 
</p>

Calculations:
<div id="msg"></div>

【讨论】：

【解决方案2】：

这行得通。应该检查其他文本框而不是当前文本框。随着用户增加或减少值，它将不断更改字段。

<!DOCTYPE html>
<html>
    <title>Electricity and Magnetism Demo</title>
    <head>
        <script type="text/javascript">
            function EqualsVoltage() {

                var Voltage = document.getElementById("inputVoltage").value;
                var Current = document.getElementById("inputCurrent").value;
                var Resistance = document.getElementById("inputResistance").value;
                if(Resistance != "0" && Current != "0" ){
                      document.getElementById("inputVoltage").value = (Current * Resistance);
                }


            }

           function EqualsCurrent() {

                var Voltage = document.getElementById("inputVoltage").value;
                var Current = document.getElementById("inputCurrent").value;
                var Resistance = document.getElementById("inputResistance").value;
                if(Voltage != "0" && Resistance != "0" ){
                    document.getElementById("inputCurrent").value = (Voltage / Resistance);
                }
            }

            function EqualsResistance() {

                var Voltage = document.getElementById("inputVoltage").value;
                var Current = document.getElementById("inputCurrent").value;
                var Resistance = document.getElementById("inputResistance").value;

                if(Voltage != "0" && Current != "0" ){
                    document.getElementById("inputResistance").value = (Voltage / Current);
                }

           }
 </script>
 </head>
 <body>
     <p>
          <label>Voltage:</label>
         <input id="inputVoltage" type="number" oninput="EqualsResistance(); EqualsCurrent()" value="0"> </p>

     <p>
        <label>Current:</label>
        <input id="inputCurrent" type="number" oninput="EqualsVoltage(); EqualsResistance()" value="0"> </p>

     <p>
       <label>Resistance:</label>
        <input id="inputResistance" type="number" oninput="EqualsCurrent();EqualsVoltage()" value="0"> </p>

    </body>

</html>

【讨论】：

感谢您的回答。这正是我所需要的。

【解决方案3】：

您已经有一个很好的答案，但我想为您提供一个替代方案。由您决定哪一个更适合您的需求。

此解决方案为用户提供了另一种方法来决定何时计算值。这样可以避免 Infinity、0 等意外值。

为此，您可以给每个元素一个按钮，以便让用户单击他想要的结果。这会将值更新到他按下按钮的输入框中。该按钮如下所示：

    <p>
     <label>Resistance:</label>
     <input id="inputResistance" type="number"> 
     <button id="calcResistance"><!-- Add this to every input -->
       Calc
     </button>
    </p>

您的 JavaScript 代码将如下所示：

function updateValues(e) {
    let changed = e.target.id,
        Voltage = Number(document.getElementById('inputVoltage').value),
        Current = Number(document.getElementById("inputCurrent").value),
        Resistance = Number(document.getElementById('inputResistance').value);

      switch(changed){
      case "calcResistance":
        document.getElementById("inputResistance").value = (Voltage / Current);
      break;

      case "calcVoltage":
        document.getElementById("inputVoltage").value = (Current * Resistance);
      break;

      case "calcCurrent":
        document.getElementById("inputCurrent").value = Voltage / Resistance;
      break;
    }

}

document.querySelectorAll("button").forEach(b=>b.addEventListener("click",updateValues));

我希望这为您提供了另一种方式来实现您想要的。

这是我正在谈论的fiddle：

function updateValues(e) {
	let changed = e.target.id,
   		Voltage = Number(document.getElementById('inputVoltage').value),
  		Current = Number(document.getElementById("inputCurrent").value),
  		Resistance = Number(document.getElementById('inputResistance').value);
	
	  switch(changed){
      case "calcResistance":
        document.getElementById("inputResistance").value = (Voltage / Current);
      break;

      case "calcVoltage":
        document.getElementById("inputVoltage").value = (Current * Resistance);
      break;

      case "calcCurrent":
        document.getElementById("inputCurrent").value = Voltage / Resistance;
      break;
  	}

}

document.querySelectorAll("button").forEach(b=>b.addEventListener("click",updateValues));

<p>
    <label>Voltage:</label>
    <input id="inputVoltage" type="number"> 
    <button id="calcVoltage">
      Calc
    </button></p>

    <p>
    <label>Current:</label>
    <input id="inputCurrent" type="number"> 
    <button id="calcCurrent">
      Calc
    </button></p>

    <p>
    <label>Resistance:</label>
    <input id="inputResistance" type="number"> 
    <button id="calcResistance">
      Calc
    </button></p>

【讨论】：

改变 UX 的“方向”的好主意：输入改变后不改变值，而是在按钮点击后设置值（这似乎更“自然”：首先我们在例如阻力上键入值和电流，然后按下电压按钮以计算其值）+1

【解决方案4】：

我建议使用onkeyup 而不是onchange 和oninput。 [编辑] 但是，无法使用按钮。

我猜工作流程是“当我输入两个数字字段时，会计算第三个”。

但是如果三个文本字段都填满了会发生什么？

如果你填写了电压、电流和电阻，然后再改变电压，电流或电阻应该改变吗？

在进行任何编码之前，您需要考虑工作流程，这就是代码错误的原因。

【讨论】：

如果您投反对票，请发表评论。我所做的答案基本上是在谈论做正确的编程基础，而不是提供完成的代码。我会那样做，除非我在这个作业中陷入了思考的这个缺陷。
使用字段上的按钮会导致 keyup 事件吗？此外，当使用 oninput 事件更改字段时，字段会随着用户输入而更改，“所有字段同时更改”的情况无关紧要？
按钮很好。我没想到。关于同时变化的字段，这不是我的意思，但我无法比实际解释得更好。如果电压改变了，那么电流和电阻不能同时改变，因为电流取决于阻力和电流上的阻力。 current 或 resistance 必须保持静态。
在这里使用onkeyup 的想法是什么？为什么不onmousemove 呢？甚至setTimeout(fn, Math.random() * Infinity)？它不仅会在按钮上失败，而且右键单击 + 粘贴，使用辅助设备，会在按班次等时不必要地触发。
啊，我明白了。是的，这是我提出解决方案时的问题。我也介绍了这一点。 +1