寻求有关使用 JavaScript 的英制/公制切换/转换器的帮助
[英]Looking for assistance on Imperial/Metric toggle/converter with JavaScript
问题描述
JavaScript/Programming novice here! 
JavaScript/编程新手在这里！ Here's a break down of what I'm trying to achieve:以下是我要实现的目标的细分：
1 - A button that toggles between Imperial and Metric with clicked. 1 - 单击可在英制和公制之间切换的按钮。
2 - Form inputs with addons/appends that switch between in and mm when the above button is pressed. 2 - 带有插件/附加的表单输入，当按下上述按钮时在 in 和 mm 之间切换。
3 - Have the form inputs to only accept numbers and then limit the range of the numbers. 3 - 让表单输入只接受数字，然后限制数字的范围。
4 - Automatic conversion of user inputs. 4 - 用户输入的自动转换。 Such as if one reads 50 in and the user changes the standard to Metric it automatically calculates to 1270 mm and vice versa.例如，如果读取 50 英寸并且用户将标准更改为公制，它会自动计算为 1270 毫米，反之亦然。
5 - If the user manually inputs a measurement unit it automatically converts to the appropriate standard. 5 - 如果用户手动输入测量单位，它会自动转换为适当的标准。 Such as if it's set to Imperial and the user puts in "5 ft" it would adjust to 60 in. Also if it's set to Metric and the user inputs "5 ft" it adjusts to 1524 mm.例如，如果它设置为英制并且用户输入“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";
}
}
I've been able to figure out 1, and most of 2. So far I can only get one input to switch from in to mm when the button is toggled.我已经能够计算出 1 和 2 中的大部分。到目前为止，当按钮被切换时，我只能得到一个输入从 in 切换到 mm。 Here's my JSFiddle so far!到目前为止，这是我的 JSFiddle！ https://jsfiddle.net/BradAndersonJr/jxnh40zw/42/ https://jsfiddle.net/BradAndersonJr/jxnh40zw/42/
I greatly appreciate any help that's offered, even if it's just pointing me in the proper direction!我非常感谢提供的任何帮助，即使它只是为我指明了正确的方向！ Thanks!谢谢！
1 个解决方案
解决方案1
1 2020-03-31 17:31:47
Hello!你好！ I am a beginner and I am going to try to help you but i have one question, do you really need all that bunch of code or you would want it to be a lot shorter?我是初学者，我将尽力帮助您，但我有一个问题，您真的需要所有这些代码还是希望它更短？ The most helpful answers to my questions have been explanatory and they tried to modify as less as it was possible my code so I could get what I was missing more easily, I will try the same Here is a working snippet of what I understood that you wanted:对我的问题最有帮助的答案是解释性的，他们试图尽可能少地修改我的代码，这样我就可以更容易地得到我遗漏的东西，我会尝试同样的，这是我理解的工作片段通缉：
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>
- I added
document.getElementsByClassName("form-control")[0].value*=25.4;我添加了document.getElementsByClassName("form-control")[0].value*=25.4;on the if statement to convert inches to mm and viceversa on the if's statements.在 if 语句中将英寸转换为 mm，反之亦然。 - I changed the input
type="text"totype="number"to avoid users to input text.我将 input type="text"更改为type="number"以避免用户输入文本。 - I did not set a maximum number on the inputs because I did not know which limit you want, you can set the attribute
max=9999for example to limit the user input to 9999, same withmin=0attribute.我没有在输入上设置最大数量，因为我不知道您想要哪个限制，您可以设置属性max=9999例如将用户输入限制为 9999，与min=0属性相同。 - I saw that if you only let users input numbers you cannot do point 5 of your question.我看到如果你只让用户输入数字，你就不能完成问题的第 5 点。
Hope it helped, by the way, why do you need a 2nd input?顺便说一句，希望它有所帮助，为什么您需要第二个输入？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.