I have written a javascript code in an HTML file using a script tag, where I want to know whether my input is greater than or less than 10 or equals to 10 or any blank input. I use the if-else method to solve this problem, but my last else if condition which is "Your input is blank" not outputting in any way.
//f1 function will run when some hit the submit button
function f1() {
//here we are taking the value of the input field using id "myinput" in the variable called myinputvar
var myinputvar = document.getElementById("myinput").value;
if (myinputvar > 10) {
document.getElementById("txt").innerHTML = "Your input number is greater than 10";
} else if (myinputvar < 10) {
document.getElementById("txt").innerHTML = "Your input number is less than 10";
} else if (myinputvar = 10) {
document.getElementById("txt").innerHTML = "Your input number is 10";
} else if (myinputvar = " ") {
document.getElementById("txt").innerHTML = "Your input is blank";
}
}<!-- this is the input tag to take inputs from user -->
Enter a integer number between 0 to anynumber = <input type="text" id="myinput"><br><br>
<!-- this is the button to submit the value -->
<button onclick="f1()">submit</button>
<!-- this is the heading tag to print the output -->
<h1 id="txt"></h1>A general way to check for only whitespace input uses the regex pattern ^\s*$. Sample code:
if (/^\s*$/.test(inputvar)) {
document.getElementById("txt").innerHTML = "Your input is blank";
}
Wrap in a form and make it required
Also cast to number
document.getElementById("myForm").addEventListener("submit", function(e) {
e.preventDefault(); // stop submission
//here we are taking the value of the input field using id "myinput" in the variable called myinputvar
var myinputvar = +document.getElementById("myinput").value; // make it a number
if (myinputvar > 10) {
document.getElementById("txt").innerHTML = "Your input number is greater than 10";
} else if (myinputvar < 10) {
document.getElementById("txt").innerHTML = "Your input number is less than 10";
} else if (myinputvar = 10) {
document.getElementById("txt").innerHTML = "Your input number is 10";
} else if (myinputvar = " ") {
document.getElementById("txt").innerHTML = "Your input is blank";
}
})<form id="myForm">
Enter a integer number between 0 to anynumber =
<input type="text" required id="myinput"><br><br>
<button>submit</button>
</form>
<h1 id="txt"></h1>pay attention not to use the shortcut:
if (inputvar) {
// this won't catch "0"!
}
but the more proper
if (inputvar === "") {
// is empty
}
and of course you should check for this condition first, if you want to handle numbers as input.