So I'm trying to take an element submitted into an input field and return a result using if else statements but it keeps returning my "else" statement no matter what. I used a w3schools project to begin with, but I can't seem to see what is going wrong.
The user will put a number is the "numSpots" input field and depending on the value of the number, an adaSpots value will get returned in the paragraph id="demo"
Here is my code
function myFunction() {
var numSpots = document.getElementById("numSpots");
var adaSpots;
if (numSpots < 25) {
adaSpots = "1";
} else {
adaSpots = "267";
}
document.getElementById("demo").innerHTML = adaSpots;
}
<p>Click the button to display a time-based greeting:</p>
<input type="number" name="numSpots" id="numSpots" />
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
you need to get the value of #numbSpots by document.getElementById("numSpots").value
function myFunction() {
var numSpots = document.getElementById("numSpots").value;
var adaSpots;
if (numSpots < 25) {
adaSpots = "1";
} else {
adaSpots = "267";
}
document.getElementById("demo").innerHTML = adaSpots;
}
<p>Click the button to display a time-based greeting:</p>
<input type="number" name="numSpots" id="numSpots" />
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
Try this ;)
You need to use parseInt function to convert string into integer value as text field value is returned as string; and you forgot to get the value using value property;
function myFunction() {
var numSpots = document.getElementById("numSpots").value;
var adaSpots;
if (parseInt(numSpots) < 25) {
adaSpots = "1";
} else {
adaSpots = "267";
}
document.getElementById("demo").innerHTML = adaSpots;
}
Related
I need to check if the value input in a HTML textbox contains a number, this is what I'm using so far, but it's not working, can anyone help? The text box would be a mix of letters and numbers, but I want to check if there are any numbers at all.
<input id="input" type="text">
<button onclick="myFunction()">Submit</button>
<p id="HasNumber"></p>
<script>
function myFunction() {
if (document.getElementById("input").value >= '0' && value <= '9' {
HasNumber.innerText = "Has Numbers" ; }
else {
HasNumber.innerText = "No Numbers" ; }
}
</script>
You can check if input contain number by using Regex like Below Example:
<input id="input" type="text">
<button onclick="myFunction()">Submit</button>
<p id="HasNumber"></p>
<script>
function myFunction() {
const inputVal = document.getElementById("input").value;
let matchPattern = inputVal.match(/\d+/g);
if (matchPattern != null) {
HasNumber.innerText = "Has Numbers" ;
} else {
HasNumber.innerText = "No Numbers" ;
}
}
</script>
I'm creating a number guessing game in JavaScript. I'm using the input.value property to get user input. Now I have a while loop which should execute until the number entered by user is equal to the actual number. But I'm unable to get out of loop and ask for user input again as the while loop always evaluates to true. How can I ask for user's input again. Please suggest anything else rather than using prompt.
var correctNumber = 16
function answer() {
while (inputNumber !== correctNumber) {
var inputNumber = Number(inputValue.value)
inputNumber = Number(inputValue.value)
}
}
<html>
<body>
<label for="answer">Your guess:</label>
<input type="text" id="answer" name="answer" />
<button onclick="guessAnswer">Guess Answer</button>
<p id="feedback"></p>
<script>
const correctNumber = 16;
const feedback = document.getElementById('feedback');
function guessAnswer() {
const answer = document.getElementById('answer');
if(answer == correctNumber) {
feedback.innerHTML = 'Correct';
} else {
feedback.innerHTML = 'Incorrect';
}
}
</script>
<body>
</html>
I have an HTML Input field and I need javascript to check if the input entered into this box is a certain string. Specifically, it has to be a specific Zip code, there are a total of 9 different zip codes, all which are different and in no numerical order. Once the code checks if it is that specific zip code, it returns "Yes", if not, simply no.
I know how to do this with ints, as shown in the code below, but not sure to how to do this with strings. This is my current code, which works with validating an integer between 1-10:
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
I think you are over-thinking this. You can just use the indexOf function to test your zip code array.
var btn= document.getElementById("btn");
var input = document.getElementById("numb");
var output = document.getElementById("demo");
var formArea = document.getElementById("formArea");
var zips = ["11111","22222","33333","44444","55555", "e1", "e2"];
btn.addEventListener("click", function() {
var result = null;
// indexOf() returns -1 when the supplied value isn't present
if(zips.indexOf(numb.value.toLowerCase()) > -1){
result = "yes";
// Show the form by removing the hidden class
formArea.classList.remove("hidden");
} else {
result = "no";
// Hide the form by adding the hidden class
formArea.classList.add("hidden");
}
output.textContent = result;
});
#formArea{
border:2px double grey;
width:50%;
box-shadow:2px 2px 0 #303030;
height:100px;
padding:5px;
}
.hidden {
display:none;
}
<input id="numb">
<button type="button" id="btn">Submit</button>
<p id="demo"></p>
<div id="formArea" class="hidden ">
Your form goes here
</div>
Can you use a regular expression for postal codes? Note this accounts for a set of zip codes that are in string format, but you are welcome to create a zip-code regex that can satisfy the set of zip codes you are interested in. And furthermore, if the set is small enough you can probably just enumerate them in a list/set and check if the set contains the input.
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
var isValidZip = /(^\d{5}$)|(^\d{5}-\d{4}$)/;
// Get the value of the input field with id="numb"
x = document.getElementById("numb").value;
// If x is Not a Number or less than one or greater than 10
if (!isValidZip.test(x)) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
convert it to a number
x = Number(document.getElementById("numb").value);
I had a task to enter a °F and convert it to °C. I also has to show a error messege instead of a number if entered value is not a number. What ever I do I can't get it to work properly. When I type letter it just shows -17.77777777777778 °C instead of messege. Can I get some help from you ?
function temperatura(){
var temp = document.getElementById("tempF").value;
if (isNaN(temp)){
document.getElementById("demo2").innerHTML =
"You need to enter a number!";
} else {
document.getElementById("demo2").innerHTML = uCelzije(temp)+" °C";
}
}
function uCelzije(f){
return (5/9) * ( Number(f) - 32 );
}
<p>Enter Fahrenheit to convert it to Celsius.</p>
<form>
<input type="number" id="tempF">°F
</form>
<button onclick="temperatura()">Try it</button>
<p id="demo2"></p><br>
It's because your input is type of number. If you type a letter, this value is not accepted and it remains an empty string:
isNaN(''); // false
then this empty string is converted to 0 in your uCelzije function:
(5/9) * ( 0 - 32 ); // -17.77777777777778
so you should also check if the input isn't empty, e.g.:
if (temp == '' || isNaN(temp)){
Antonio, if i understood well, maybe you only need to add a new validation to check an empty string, following how you construct your code. Try to add an empty string validation to your script.
var temp = document.getElementById("tempF").value;
if (isNaN(temp) || temp.trim() == ""){
document.getElementById("demo2").innerHTML =
"You need to enter a number!";
} else {
document.getElementById("demo2").innerHTML = uCelzije(temp)+" °C";
}
You need to parse the temp value as int. This will make sure that temp is either a number or NaN. Everything will work just fine.
Edit: This was suggested by #Servuc as well in the question comments.
<p>Enter Fahrenheit to convert it to Celsius.</p>
<form>
<input type="number" id="tempF">°F
</form>
<button onclick="temperatura()">Try it</button>
<p id="demo2"></p>
<br>
<script>
function temperatura() {
var temp = parseInt(document.getElementById("tempF").value);
if (isNaN(temp)) {
document.getElementById("demo2").innerHTML =
"You need to enter a number!";
} else {
document.getElementById("demo2").innerHTML = uCelzije(temp) + " °C";
}
}
function uCelzije(f) {
return (5 / 9) * (Number(f) - 32);
}
</script>
When I type in an ID number for the game, I always gets the 3rd statement of my if else expression. Where am I going wrong?!!
<html>
<body>
<p>Type in the ID and hit search:</p>
<button onclick="myFunction()">Search</button>
<p id="demo"></p>
<form>
<input id="textbox" type="text" />
</form>
<script>
var textboxValue = document.getElementById("textbox").value;
function myFunction() {
var message;
if (textboxValue == 1) {
message = "Fantasy World";
} else if (textboxValue == 2) {
message = "Sir Wags A Lot";
} else {
message = "Take a Path";
}
document.getElementById("demo").innerHTML = message;
}
</script>
</body>
</html>
The problem is you always test the same, initial, value of the input.
Change
var textboxValue = document.getElementById("textbox").value;
function myFunction() {
to
function myFunction() {
var textboxValue = document.getElementById("textbox").value;
This way the value will be read each time the function is called.
Put this statement:
var textboxValue = document.getElementById("textbox").value;
Inside the function.