正在寻求有关带JavaScript的英制/公制切换/转换器的帮助

这里是JavaScript/编程新手！以下是我试图实现的目标：

1-单击后在英制和公制之间切换的按钮。

2-当按下上述按钮时，使用在英寸和毫米之间切换的附加项/追加项形成输入。

3-让表单输入只接受数字，然后限制数字的范围。

4-用户输入的自动转换。例如，如果读取50英寸，用户将标准更改为公制，则会自动计算为1270毫米，反之亦然。

5-如果用户手动输入测量单位，它会自动转换为适当的标准。例如，如果它被设置为英制，用户输入"5英尺"，它将调整为60英寸。此外，如果它设置为公制，用户输入"5英尺"，它将调节为1524毫米。

function unitToggle() {
var toggle = document.getElementById("toggle");
var units = document.getElementsByClassName("units");
if (toggle.innerHTML === "Imperial") {
toggle.innerHTML = "Metric";
} else {
toggle.innerHTML = "Imperial";
}
if (units[0].innerHTML === "in") {
units[0].innerHTML = "mm";
} else {
units[0].innerHTML = "in";
}
}

我已经算出了1，以及2的大部分。到目前为止，当按钮被切换时，我只能得到一个从英寸切换到毫米的输入。到目前为止，这是我的JSFiddle！https://jsfiddle.net/BradAndersonJr/jxnh40zw/42/

我非常感谢所提供的任何帮助，即使它只是为我指明了正确的方向！谢谢

你好我是一个初学者，我会尽力帮助你，但我有一个问题，你真的需要那么多代码吗？或者你希望它短得多？对我的问题最有用的答案是解释性的，他们试图尽可能少地修改我的代码，这样我就可以更容易地得到我遗漏的东西，我也会这么做以下是我理解的您想要的工作片段：

function unitToggle() {
var toggle = document.getElementById("toggle");
var units = document.getElementsByClassName("units");
if (toggle.innerHTML === "Imperial") {
toggle.innerHTML = "Metric";
document.getElementsByClassName("form-control")[0].value*=25.4;
} else {
toggle.innerHTML = "Imperial";
document.getElementsByClassName("form-control")[0].value/=25.4;
}
if (units[0].innerHTML === "in") {
units[0].innerHTML = "mm";
} else {
units[0].innerHTML = "in";
}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<body>
<button onClick="unitToggle()" type="button" id="toggle" class="btn btn-primary btn-md mb-3" style="width: 160px;">Imperial</button>
</div>
<div class="input-group input-group-sm mb-3" style="width: 160px;">
<input type="number" class="form-control" aria-label="Small" style="text-align: right;" placeholder="User Input">
<div class="input-group-append">
<span class="input-group-text units">in</span>
</div>
</div>
<div class="input-group input-group-sm mb-3" style="width: 160px;">
<input type="number" class="form-control" aria-label="Small" style="text-align: right;" placeholder="User Input">
<div class="input-group-append">
<span class="input-group-text units">in</span>
</div>
</div>
</body>
</html>

我在if语句中添加了document.getElementsByClassName("form-control")[0].value*=25.4;，以将英寸转换为毫米，在if的语句中添加反之亦然
我将输入type="text"更改为type="number"，以避免用户输入文本
我没有在输入上设置最大值，因为我不知道你想要哪个限制，你可以设置属性max=9999，例如将用户输入限制为9999，与min=0属性相同
我看到，如果你只让用户输入数字，你就无法完成问题的第5点

希望它能帮助你，顺便说一句，为什么你需要第二次输入

相关内容

最新更新

热门标签：