时间戳

首页 > 解决方案 > 由于编码错误，oninput 和 onchange 无法正常工作

javascript - 由于编码错误，oninput 和 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>

这是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。但是，我无法弄清楚这一点。

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

标签： javascripthtml

解决方案

问题：当用户在输入中编辑例如电压时，计算同时改变了输入值（输入值和计算值通常不同）。解决方案：在单独的位置显示输出计算 - 而不是作为输入值。使用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>

推荐阅读