转换权重，值不显示

我正在创建这个简单的权重转换器，我在文本字段中显示值时遇到了一个小问题。我希望结果回到我输入公斤的字段中。

我做错了什么？

目前我正在尝试将公斤转换为克

function submitF() {
const option1 = document.querySelector("#option1").value;
const option2 = document.querySelector("#option2").value;
var inputField = document.querySelector("#weightarea").value;
var kgToGram = inputField * 1000;
if (option1 === "Kilo" && option2 === "Grams") {
inputField = kgToGram;
}
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<input id="weightarea" type="number" placeholder="value.....">
<input type="button" value="submit" onclick="submitF()"><br>
<select id="option1">
<option>Kilo</option>
<option>Pounds</option>
<option>Grams</option>
</select>
<p>to</p>
<select id="option2">
<option>Kilo</option>
<option>Pounds</option>
<option>Grams</option>
</select>

<script src="java2.js"></script>
</body>
</html>

var inputfield = document.querySelector("#weightarea").value;
inputfield = kgToGram;

。与

...

document.querySelector("#weightarea").value = kgToGram;

我相信你希望inputfield成为一个参考，但事实并非如此。当前代码只是声明一个变量并使用输入值对其进行初始化。

上面的第二个示例实际上设置了输入的值。

见下文：

function submitF() {
const option1 = document.querySelector("#option1").value;
const option2 = document.querySelector("#option2").value;
var inputField = document.querySelector("#weightarea").value;
var kgToGram = inputField * 1000;
if (option1 === "Kilo" && option2 === "Grams") {
document.querySelector("#weightarea").value = kgToGram;
}
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<input id="weightarea" type="number" placeholder="value.....">
<input type="button" value="submit" onclick="submitF()"><br>
<select id="option1">
<option>Kilo</option>
<option>Pounds</option>
<option>Grams</option>
</select>
<p>to</p>
<select id="option2">
<option>Kilo</option>
<option>Pounds</option>
<option>Grams</option>
</select>

<script src="java2.js"></script>
</body>
</html>

执行转换后，您没有设置输入字段的值。相反，你只是告诉inputFieldjavascript 变量保存任何kgToGram的值。

function submitF() {
const option1 = document.querySelector("#option1").value;
const option2 = document.querySelector("#option2").value;
var inputField = document.querySelector("#weightarea").value; // retrieving the value at that point-in-time.  Not the entire element.
var kgToGram = inputField * 1000;

if (option1 === "Kilo" && option2 === "Grams") {
// wrong ... inputField = kgToGram;
document.querySelector("#weightarea").value = kgToGram; // re-assign the value of the input element
}

}

相关内容

最新更新

热门标签：