Javascript 由于编码错误，oninput和onchange无法工作_Javascript_Html

Javascript 由于编码错误，oninput和onchange无法工作

javascript html

Javascript 由于编码错误，oninput和onchange无法工作,javascript,html,Javascript,Html,我的密码是。以下是HTML： <!DOCTYPE html> <html> <title>Electricity and Magnetism Demo</title> <body> <p> <label>Voltage:</label> <input id="inputVoltage" type="number" oninput="EqualsVoltage()" onchange="

我的密码是。以下是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>

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

当oninput和onchange运行时，我已经能够制作一个将公里转换为英里的转换器；然而，我无法理解这一点

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

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

函数计算{ 设c=输入电流.value；设r=inputResistance.value；设v=输入电压值； msg.innerHTML=`电压：${c*r}` +`当前：${v/r}` +`resistance:${v/c}`； } 电压：

当前：

阻力：

计算：

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

函数计算{ 设c=输入电流.value；设r=inputResistance.value；设v=输入电压值； msg.innerHTML=`电压：${c*r}` +`当前：${v/r}` +`resistance:${v/c}`； } 电压：

当前：

阻力：

计算：

这很有效。应该选中其他文本框，而不是当前文本框。当用户增加或减少值时，它将不断更改字段

<!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>

这很有效。应该选中其他文本框，而不是当前文本框。当用户增加或减少值时，它将不断更改字段

<!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>

你已经有了一个很好的答案，但我想给你一个替代方案。由你决定哪一个更适合你的需要

此解决方案为用户提供了另一种选择，以决定何时计算值。这可以避免意外值，如无穷大、0等

为此，您可以为每个元素提供一个按钮，以便让用户单击他希望得到结果的元素。这将更新他按下按钮的输入框的值。该按钮将如下所示：

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

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));

我希望这能给你另一种实现你想要的方式

下面是我所说的一个例子：

函数updateValue{ 让更改=e.target.id，电压=Numberdocument.getElementById'inputVoltage'。值，当前=Numberdocument.getElementByIdinputCurrent.value，电阻=Numberdocument.getElementById'inputResistance'。值；开关改变{ 案例Calcrestance： document.getElementByIdinputResistance.value=电压/电流；打破外壳额定电压： document.getElementByIdinputVoltage.value=电流*电阻；打破病例发生率： document.getElementByIdinputCurrent.value=电压/电阻；打破 } } document.querySelectorAllbutton.forEachb=>b.addEventListenerclick，updateValue；电压：计算

当前：计算

阻力：计算

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

此解决方案为用户提供了另一种选择，以决定何时计算值。这可以避免意外值，如无穷大、0等

为此，您可以为每个元素提供一个按钮，以便让用户单击他希望得到结果的元素。这将更新他按下按钮的输入框的值。该按钮将如下所示：

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

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));

我希望这能给你另一种实现你想要的方式

下面是我所说的一个例子：

当前：计算

阻力：计算

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

我猜工作流是当我输入两个数字字段时，第三个是计算出来的

但是如果这三个文本字段都被填写了，会发生什么呢

如果您填写了电压、电流和电阻，然后再次更改电压，那么电流或电阻是否应该更改

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

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

我猜工作流是当我输入两个数字字段时，第三个是计算出来的

但是如果这三个文本字段都被填写了，会发生什么呢

如果您填写了电压、电流和电阻，然后再次更改电压，那么电流或电阻是否应该更改

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

不需要将参数传递给对参数没有任何作用的函数，只需进行语义观察-某些getElementById中的L是大写的。显然它们不应该是。当您输入电压时，您也在调用changeVoltage，因此，电压中的任何新值都将被调用changeVoltage覆盖。。。changeVoltage应该计算其他两个变量，但不确定如何计算，因为电压的变化会导致电流或电阻的变化，或者两者兼而有之。本网站提供了一些很好的简单示例，说明您正在尝试实现的目标。查看修改过的代码。无需将参数传递给与参数无关的函数，只需进行语义观察-某些getElementById中的L是大写的。显然它们不应该是。当您输入电压时，您也在调用changeVoltage，因此，电压中的任何新值都将被调用changeVoltage覆盖。。。changeVoltage应该计算其他两个变量，但不确定如何计算，因为电压的变化会导致电流或电阻的变化，或者两者兼而有之。本网站提供了一些很好的简单示例，说明您正在尝试实现的目标。看看修改过的代码。如果你投了反对票，请发表评论。我的回答基本上是说正确地做编程的基础，而不是提供一个完整的代码。除非我在这项作业中的思考出现了这个缺陷，否则我会这么做。使用字段上的按钮会导致键控事件吗？此外，当使用oninput事件更改字段时，字段会随着用户的输入而更改，如果所有字段都同时更改，那么这种情况就无关紧要了？关于按钮，这是一个很好的例子。我没想到。关于同时变化的场，这不是我的意思，但我无法解释得比实际情况更好。如果电压改变，那么电流和电阻就不能同时改变，因为电流取决于电阻，电阻取决于电流。电流或电阻必须保持静止。在这里使用onkeyup有什么想法？当你这样做的时候，为什么不搬家呢？甚至SetTimeOutn，Math.random*无穷大？它不仅会失败的按钮，但与右键点击+粘贴，与辅助设备，将发射不必要的换档按钮等，啊，我理解。是的，这是我提出解决方案时的问题。我也谈到了这一点+1如果你投了反对票，请发表评论。我的回答基本上是说正确地做编程的基础，而不是提供一个完整的代码。除非我在这项作业中的思考出现了这个缺陷，否则我会这么做。使用字段上的按钮会导致键控事件吗？此外，当使用oninput事件更改字段时，字段会随着用户的输入而更改，如果所有字段都同时更改，那么这种情况就无关紧要了？关于按钮，这是一个很好的例子。我没想到。关于同时变化的场，这不是我的意思，但我无法解释得比实际情况更好。如果电压改变，那么电流和电阻就不能同时改变，因为电流取决于电阻，电阻取决于电流。电流或电阻必须保持静止。在这里使用onkeyup有什么想法？当你这样做的时候，为什么不搬家呢？甚至SetTimeOutn，Math.random*无穷大？它不仅会失败的按钮，但与右键点击+粘贴，与辅助设备，将发射不必要的换档按钮等，啊，我理解。是的，这是我提出解决方案时的问题。我也谈到了这一点+1改变UX方向的好主意：输入改变后不改变值，而是点击按钮后设置值，这似乎更自然：首先我们键入电阻和电流值，然后按下按钮

在电压上计算其值+1改变UX方向的好主意：在输入改变后不改变值，而是在点击按钮后设置值，这似乎更自然：首先我们在电阻和电流上键入值，然后按下电压按钮计算其值+1谢谢你的回答。这就是我需要的。谢谢你的回答。这就是我需要的。