I am coding a website that changes degrees from Celsius to Fahrenheit. I have tried using isNan and /^\d+$/.test to make sure that no letter is inputed, but the code will still accept any input if there is a number in front. my question is, how can I stop the code from running if there is any letter in the string? for example, 5a causes the calculation to run, but a5 will cause the alert to run.
any alternatives are appreciated.
here is my code:
html code: (everything works here)
<head>
<meta charset="utf-8">
<title>Convert Temperatures</title>
<link rel="stylesheet" href="styles.css">
<script src="convert_temp.js"></script>
</head>
<body>
<main>
<h1>Convert temperatures</h1>
<input type="radio" name="conversion_type" id="to_celsius" checked>Fahrenheit to
Celsius<br>
<input type="radio" name="conversion_type" id="to_fahrenheit">Celsius to
Fahrenheit<br><br>
<label id="degree_label_1">Enter F degrees:</label>
<input type="text" id="degrees_entered" ><br>
<label id="degree_label_2">Degrees Celsius:</label>
<input type="text" id="degrees_computed" disabled><br>
<label> </label>
<input type="button" id="convert" value="Convert" /><br>
</main>
</body>
</html>
JavaScript:
var $ = function(id) { return document.getElementById(id); };
var clearTextBoxes = function() {
$("degrees_entered").value = "";
$("degrees_computed").value = "";
};
var toFahrenheit = function() {
$("degree_label_1").innerHTML = "Enter C degrees:";
$("degree_label_2").innerHTML = "Degrees Fahrenheit:";
clearTextBoxes();
document.getElementById("degrees_entered").focus();
};
var toCelsius = function() {
$("degree_label_1").innerHTML = "Enter F degrees:";
$("degree_label_2").innerHTML = "Degrees Celsius:";
clearTextBoxes();
document.getElementById("degrees_entered").focus();
};
var convertTemp = function() {
var degrees = parseFloat(document.getElementById("degrees_entered").value);
var answer;
if (/^\d+$/.test(degrees)){
if($("to_fahrenheit").checked){
answer = degrees * (9/5) + 32;
$("degrees_computed").value = answer.toFixed(0);
}
else {
answer = (degrees -32) * (5/9);
$("degrees_computed").value = answer.toFixed(0);
}
}
else{
alert("You must enter a valid number for degrees.");
}
};
window.onload = function() {
$("convert").onclick = convertTemp;
$("to_celsius").onclick = toCelsius;
$("to_fahrenheit").onclick = toFahrenheit;
$("degrees_entered").focus();
};
>Solution :
parseFloat will ignore any trailing non-numeric characters, so by the time your regex test runs they’re already gone. Test it before you call parseFloat.
From MDN:
If parseFloat encounters a character other than a plus sign (+), minus sign (- U+002D HYPHEN-MINUS), numeral (0–9), decimal point (.), or exponent (e or E), it returns the value up to that character, ignoring the invalid character and characters following it.
console.log(parseFloat("5a")) // 5
console.log(parseFloat("a5")) // NaN