Looking for assistance on Imperial/Metric toggle/converter with JavaScript
Question
JavaScript/Programming novice here! Here's a break down of what I'm trying to achieve:
1 - A button that toggles between Imperial and Metric with clicked.
2 - Form inputs with addons/appends that switch between in and mm when the above button is pressed.
3 - Have the form inputs to only accept numbers and then limit the range of the numbers.
4 - Automatic conversion of user inputs. Such as if one reads 50 in and the user changes the standard to Metric it automatically calculates to 1270 mm and vice versa.
5 - If the user manually inputs a measurement unit it automatically converts to the appropriate standard. 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.
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. Here's my JSFiddle so far! 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 answers
solution1
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;on the if statement to convert inches to mm and viceversa on the if's statements. - I changed the input
type="text"totype="number"to avoid users to input text. - 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. - I saw that if you only let users input numbers you cannot do point 5 of your question.
Hope it helped, by the way, why do you need a 2nd input?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.