Question

我的代码是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运行时，我已经能够制造出将公里转换为英里的转换器；但是，我无法弄清楚。

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

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

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

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

Answer 4

我建议使用onkeyup代替onchange和oninput。 [edit]但是无法使用按钮。

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

但是如果所有三个文本字段都填写了怎么办？

如果您先填充电压，电流和电阻，然后再次更改电压，电流或电阻会改变吗？

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

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

4 个答案: