如何向输入类型添加值

Question

如何向输入类型添加值。

我目前正在研究米到公里、英里、......

我在我的 HTML 代码中创建了不同的输入类型，并在 JS 中获取了它们的值，它工作得很好，我阻止了页面在我点击提交后重新加载。现在我想重新分配新的计算值 (kilometer.value = meter / 1000)，但这不起作用。

当我在可变仪表和第一个可变公里之后放置一个 console.log 时，它工作得很好。它记录了正确的数字 - 重新分配不起作用。

JavaScript:

const calculateMeter = () => {
    let meter = document.getElementById("meter").value;

    let kilometer = document.getElementById("kilometer").value;
    kilometer.value = meter / 1000;
}

HTML:

<form id="calculator" onsubmit="calculateMeter(); return false">
    <label for="kilometer">Kilometer:</label>
    <input type="number" id="kilometer"><br>

    <label for="meter">Meter:</label>
    <input type="number" id="meter"><br>

Answer 1

您应该将米转换为 intiger

const calculateMeter = () => {
    let meter = document.getElementById("meter").value;

    let kilometer = document.getElementById("kilometer").value;
    kilometer.value = Number(meter) / 1000;
}

Answer 2

你的意思是这样吗？

let meterInp = document.getElementById("meter");
let kilometerInp = document.getElementById("kilometer");

meterInp.addEventListener("change", ()=>{
  kilometerInp.value = (+meterInp.value)/1000;
});
kilometerInp.addEventListener("change", ()=>{
  meterInp.value = (+kilometerInp.value)*1000;
});

<form id="calculator" onsubmit="calculateMeter(); return false">
    <label for="kilometer">Kilometer:</label>
    <input type="number" id="kilometer" step="0.00001"><br>

    <label for="meter">Meter:</label>
    <input type="number" step="0.01" id="meter"><br>
</form>

(+) 将字符串转换为数字。例如(+meterInp.value)/1000

Answer 3

<input> 的

value 始终是字符串，但对于数字输入类型，如 type="number" 或 type="range"，您可以直接使用valueAsNumber:

const calculateMeter = () => {
  let kilometer = document.getElementById("kilometer").valueAsNumber;
  document.getElementById("meter").value = kilometer * 1000;
}

const calculateKilometer = () => {
  let meter = document.getElementById("meter").valueAsNumber;
  document.getElementById("kilometer").value = meter / 1000;
}

  <label for="kilometer">Kilometer:</label>
  <input type="number" id="kilometer" oninput="calculateMeter()"><br>

  <label for="meter">Meter:</label>
  <input type="number" id="meter" oninput="calculateKilometer()"><br>

如何向输入类型添加值

How can I add an value to an input type

javascript

variables