Testing if entered value is a number - javascript

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>

Related

This will not return the "if" statement, even though terms are met

This code should detect where a number is above 1,000,000,000 and below 9,999,999,999. I try to input numbers between these 2 values, but it still returns the else statement. Where is the problem in this code?
<html>
<head>
<title>Checking with RegExp</title>
</head>
<body>
<p>Enter a 10 digit number between 1000000000 and 9999999999.</p>
<textarea id="inputnumber"></textarea>
<button type="button" id="submitnumber">Check</button>
<script>
function checknumber() {
var tendigitnum = document.getElementById("inputnumber")
if (tendigitnum >= 1000000000 && tendigitnum <= 9999999999) {
alert("You entered the number" + tendigitnum + ".")
}
else {
alert("The page will refresh. Please enter a valid number.")
location.reload()
}
}
document.getElementById("submitnumber").onclick = checknumber
</script>
</body>
</html>
You're comparing an HTML element to a number. You want to compare a number to a number, by:
Using the .value property on the element to get the string, and
Parsing that string to a number (you have lots of different ways to do this depending on your use case; see this answer for a list of them)
For instance:
var tendigitnum = Number(document.getElementById("inputnumber").value);
Live Example:
function checknumber() {
var tendigitnum = Number(document.getElementById("inputnumber").value)
if (tendigitnum >= 1000000000 && tendigitnum <= 9999999999) {
alert("You entered the number" + tendigitnum + ".")
} else {
alert("The page will refresh. Please enter a valid number.")
location.reload()
}
}
document.getElementById("submitnumber").onclick = checknumber
<p>Enter a 10 digit number between 1000000000 and 9999999999.</p>
<textarea id="inputnumber"></textarea>
<button type="button" id="submitnumber">Check</button>
On modern browsers you could use a number input:
<input type="number" id="inputnumber">
and use its valueAsNumber property instead of value, since valueAsNumber will already be a number. You can even add the range validation to the input. More on MDN.
You need to check the value in your element, in your code you are checking element

How to store user input as a variable?

I am trying to design a simple companion interface for a board game I am creating. How do you request user input, and then update a variable with the new input and display the new result? ie. "What number did you roll?" -> "You are now on [this] space."
Sorry, I am very new to coding... Here is the closest I've got
<var space = 1>
<button onclick="mySpaceNumber()">Die Roll</button>
<p id="demo"></p>
<script>
function mySpaceNumber() {
var dieroll = prompt("What did you roll?", "Enter Value");
if (dieroll != null) {
document.getElementById("demo").innerHTML =
"You are now on " + function mySpace ;
function mySpace(){
'space'= 'space'+ 'dieroll'
space
}
}
}
</script>
if (dieroll != null) { - This will always be NOT null if something isn't entered. Reason being is that it is UNDEFINED, rather than NULL. These are two different things. Null is an actual value. When a variable has been declared, but no value has been given to it then it becomes undefined.
With that said, I would make this line if (dieroll !== "undefined)"
Regarding 'space'= 'space'+ 'dieroll'
I would not put any apostraphe's in the variable's NAME, that is something you want to do when you declare a string.
Regarding this: You will want to put your code on one line.
From:
document.getElementById("demo").innerHTML =
"You are now on " + function mySpace ;
To:
document.getElementById("demo").innerHTML = "You are now on " + mySpace();
The variable space is undefined, you have not initialized it or given it a value. To do that we need to add this in var space=0;
Lastly, I don't see your HTML so I'm not sure what element the variable space is supposed to reference. If it's some other box or something you can remove the var space=0; and get the value by selecting the element you need it from. Without knowing what that would be or what your html looks like I can't speculate further.
With all that said, here is where we are.
function mySpaceNumber() {
var dieroll = prompt("What did you roll?", "Enter Value");
if (dieroll !== "undefined") {
document.getElementById("demo").innerHTML = "You are now on " + mySpace();
function mySpace(){
var space=0;
space = space + dieroll;
return space
}
}
}
Then onto the HTML
This is not valid.
Code Snippet
function mySpaceNumber() {
var dieroll = prompt("What did you roll?", "Enter Value");
if (dieroll !== "undefined") {
document.getElementById("roll").value = dieroll;
document.getElementById("demo").innerHTML = "You are now on " + mySpace();
}
function mySpace(){
result = getSpace();
return result;
}
function getSpace(){
gs1 = +document.getElementById('quantity').value + +document.getElementById('roll').value
return gs1;
}
document.getElementById('quantity').value = +document.getElementById('quantity').value + +document.getElementById('roll').value
}
function resetSpace(){
document.getElementById('quantity').value = '1';
}
<div>Roll:
<input type="number" id="roll" name="roll" style="width: 50px;" />
Current Space:
<input type="number" id="quantity" name="quantity" value="1" style="width: 50px;" />
</div>
<button onclick="mySpaceNumber()">Die Roll</button>
<button id="reset" onclick="resetSpace()">reset</button>
<div id="demo"></div>

Javascript check if input is a specific string

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);

using input field in if else statement javascript

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;
}

Reformat and return textarea input

Can someone help me with a working html/jquery script that will read the text input of an html textarea box and test if the text input on the box contains a numeric string of 11 characters as part of its content, if it does, the script should come up with a dialog box that will ask if the client will like to reformat that numeric content of the textarea box. if the yes option of the dialog box is selected by the client, the script should then reformat the numeric string by adding spaces after the 3rd, 6th and 9th characters e.g change 08293434565 to 082 934 345 65, and thereafter return the reformatted data into the html textarea box
function Confirm() {
var data = $('#fix').val();
var arr = data.split(' ');
//check if numeric and 11 numbers
if (isNaN(arr[5]) == true && arr[5].length == 11) {
//show popup, if yes run the format function
var confirm_value = document.createElement("INPUT");
confirm_value.type = "hidden";
confirm_value.name = "confirm_value";
if (window.confirm("Message contains numeric characters which might make the message not delivered to some networks. Do you want us to reformat the message ?. This might increase the numbers of pages of the message and the cost?")) {
confirm_value.value = "Yes";
format();
} else {
confirm_value.value = "No";
}
document.forms[0].appendChild(confirm_value);
}
}
function format() {
var first = arr[5].substring(0, 4);
var second = arr[5].substring(4, 20);
second = second.replace(/(.{3})/g, "$1 ")
$('#fix').val("This is my mobile number " + first + " " + second);
};
<input type="textbox" id="fix" name="fix" />
<button ID="button1" OnClick="Confirm();" runat="server">Confirm</button>
Your test for numeric and 11 numbers isn't correct.
function Confirm() {
var data = $('#fix').val();
//check if numeric and 11 numbers
if (!isNaN(data) == true && data.length == 11) {
//show popup, if yes run the format function
if (window.confirm("Message contains numeric characters which might make the message not delivered to some networks. Do you want us to reformat the message ?. This might increase the numbers of pages of the message and the cost?")) {
format(data);
}
} else {
alert('Check number format');
}
}
function format(data) {
var first = data.substring(0, 4);
var second = data.substring(4, 20);
second = second.replace(/(.{3})/g, "$1 ")
$('#fix').val("This is my mobile number " + first + " " + second);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="textbox" id="fix" name="fix" />
<button ID="button1" OnClick="Confirm();" runat="server">Confirm</button>

Categories

Resources