In the if statement bellow only the else block executes even when the when the answer is 10!
JavaScript
$("#correctOne").hide();
$("#incorrectOne").hide();
function myFunction() {
var inputOne = $("#inputOne").value;
if (inputOne === 10) {
$("#correctOne").show();
} else {
$("#incorrectOne").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h1>What number am I thinking of?</h1>
<p>Divide me by four and my remainder is two. I am net if you see me through the looking glass.</p>
<form>
<input id="inputOne" type="text" placeholder="Answer Here">
<button onclick="myFunction()">submit</button>
</form>
<h2 id="correctOne">Yes!</h2>
<h3 id="incorrectOne">Nope!</h3>
.value is JavaScript and only works for InputElements, you have $("#inputOne'), a jQuery object, and thus need .val().
Next, if you enter 10 into the field, inputOne is "10", not 10, but === also compares type.
Use == instead.
Here is the modified code with code snippet.
I have change .val() instead of .value().
-- Another change is change 10 to "10"
-- Another change is changing == to ===
$("#correctOne").hide();
$("#incorrectOne").hide();
function myFunction() {
var inputOne = $("#inputOne").val();
if (inputOne == "10") {
$("#correctOne").show();
} else {
$("#incorrectOne").show();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<h1>What number am I thinking of?</h1>
<p>Divide me by four and my remainder is two. I am net if you see me through the looking glass.</p>
<form>
<input id="inputOne" type="text" placeholder="Answer Here">
<button onclick="myFunction()">submit</button>
</form>
<h2 id="correctOne">Yes!</h2>
<h3 id="incorrectOne">Nope!</h3>
The syntax is var inputOne ==$('#inputOne).val();
val() is the method to retrieve the value in an element.
html() method can set the inner HTML content too.
Related
This question already has answers here:
How to get a number value from an input field?
(4 answers)
Closed 1 year ago.
I've been losing my mind now for a couple of hours as I can't find out what I'm doing wrong here. Trying to see if the input is equal to 3, if so then show a window saying "The number is equal to 3".
Here's the HTML and Javascript:
<input type="number" name="number" id="number">
<button id="btn" onclick="checkNumber()">Button</button>
<div>
<span id="label"></span>
</div>
<script>
var number = document.getElementById("number").value;
function checkNumber() {
if (number === 3) {
window.alert("The number is equal to 3");
}
}
</script>
The number variable should typecasted, i.e converted to number type from string type
function checkNumber() {
var number = document.getElementById("number").value;
var value = Number(number);
if (value === 3) {
alert("The number is equal to 3");
} else {
alert("The number is not equal to 3");
}
}
<html>
<body>
<input id="number" name="number" type="number" />
<button id="btn" type="button" onclick="checkNumber()">Check</button>
</body>
</html>
Input value are strings, you can change them to number by adding "+" sign.
var number = document.getElementById("number");
function myFunc() {
if (+number.value === 3) {
window.alert("The number is equal to 3");
}
}
<input type="number" name="number" id="number">
<button id="btn" onclick="myFunc()">Button</button>
<div>
<span id="label"></span>
</div>
<script>
</script>
You are using === which checks both for type and value. the input received from the user is a string while 3 is a Number.
To solve that, you must first convert the input value to Number and then compare.
Also, i would add the reference for the element outside of the function and check for the current value each time the function gets called.
var element = document.getElementById("number");
function checkNumber() {
const numberAsString = element.value;
const number = Number(numberAsString);
if (number === 3) {
window.alert("The number is equal to 3");
}
}
<input type="number" name="number" id="number">
<button id="btn" onclick="checkNumber()">Button</button>
<div>
<span id="label"></span>
</div>
I've got simple form that has to return square root of a number. But i get NaN error. As you can see, variable "number" is number-type. What am i doing wrong?
let number = parseInt(document.getElementById('value'));
function myFunction() {
alert(Math.sqrt(number));
}
<div class="container">
<form>
<fieldset>
<legend>Number squared</legend>
<p><label >Insert number here: </label><input type="number" id="value"></p>
</fieldset>
<p><input type="button" id="button" onclick="myFunction()" value="calculate"></p>
</form>
</div>
First, document.getElementById() returns an HTML element. You would have to access the value property by doing document.getElementById().value. Second, the number variable will always be equal to NaN since that line of code is executed first and is never changed.
let value = document.getElementById('value').value // Evaluates to ""
let number = parseInt(value); // Evaluates to NaN
// The number variable is never re-evaluated when the function is invoked
function() {
alert(Math.sqrt(number));
}
You would have to move that line of code into your function so that the value of number is determined when the function is called, not at the beginning of code execution.
function myFunction() {
const number = parseInt(document.getElementById('value').value)
if (isNaN(number)) {
alert('Please pass in a number')
return
}
alert(Math.sqrt(number))
}
<div class="container">
<form>
<fieldset>
<legend>Number squared</legend>
<p><label>Insert number here: </label><input type="number" id="value"></p>
</fieldset>
<p><input type="button" id="button" onclick="myFunction()" value="calculate"></p>
</form>
</div>
function myFunction() {
const number = +document.getElementById('value').value;
if (isNaN(number)) {
alert('Please pass in a number')
return
}
alert(Math.sqrt(number))
}
It is because document.getElementById() returns the element itself and not the value. You need to get the value of the input to parse it as integer.
Change the code to parseInt(document.getElementById('value').value);
You must get your element value inside your function call, otherwise you will get NaN(Not a number), like this:
function myFunction() {
let number = parseInt(document.getElementById('value').value);
if(number !== "" && number != undefined && number != null && !isNaN(number)){
alert(Math.sqrt(number));
}else{
alert("Please enter valid number");
}
}
You can also check for undefined, null and empty string values.
I wont put the whole code, since i think it doesnt matter, because the problem is js related. I have a form and input fields(2 password fields). With css i made a "green tick" next to these fields. I want these green ticks to appear when BOTH fields are equal, and re-appear when i delete one "character" from one of the fields - when they are not equal.
pswd1/pswd2 - my input pass fields
I want the green ticks to show when they are equal and when the length of the second field(the confirmation one) is greater than 6
$('#pswd1').on('change', function(){
pass = $('#pswd1').val();
pass1 = $("#pswd2").val();
if(pass = pass1 && pass1.length > 6){
$("#gtick1").show();``
$("#gtick2").show();
}
});
By using =, you are assigning the value from one variable to another inside the condition, to compare you should use == or ===. Also I will prefer input event instead of change here.
Try the following way:
$('#pswd1, #pswd2').on('input', function(){
var pass = $('#pswd1').val();
var pass1 = $("#pswd2").val();
if(pass == pass1 && pass1.length > 6){
$("#gtick1, #gtick2").show();
}
else{
$("#gtick1, #gtick2").hide();
}
});
span{
color: green;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="password" id="pswd1">
<span id="gtick1">✔</span><br>
<input type="password" id="pswd2">
<span id="gtick2">✔</span>
pass = pass1
should be
pass === pass1
You have some wild `` in there too. Throw a console.log('hi') in at the top to make sure the code is actually being run and you should be gucci.
you can play around this code. Though it's not exactly what you want but it will serve your purpose
$('#pswd1, #pswd2').on('keyup', function(){
pass1 = $('#pswd1').val();
pass2 = $("#pswd2").val();
if(pass1 === pass2){
$("#passDiv1").css("background-color", "green");
$("#passDiv2").css("background-color", "green");
}else{
$("#passDiv1").css("background-color", "yellow");
$("#passDiv2").css("background-color", "yellow");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="passDiv1" style="padding: 5px">
<input id="pswd1" type="password"/>
</div>
<div id="passDiv2" style="padding: 5px">
<input id="pswd2" type="password"/>
</div>
var bal = document.getElementById("o").value;
console.log(bal);
function a() {
if (bal === "A") {
console.log(ba);
alert("Hello");
} else {
alert("jjhv");
}
}
<html>
<body>
<form>
<input type="text" id="o">
<input type="submit" id="oo" value="jhgf" onclick="a()">
</form>
</body>
</html>
// here my aim is to alert the value "Hello" when user types "A" in the input field followed by click on input type submit.
But In the above code when user is giving input as anything ,and when user is submitting it the value assigned to variable "bal" becomes empty string.
This is the reason for which only else block is being executed .I am unable to get the exact reason why this is happening .
Should I adopt any other approach to get the valid input field value ,so that I can successfully compare the value and alert the desired result
function a(){
var bal = document.getElementById("o").value;
if(bal==="A"){
console.log(bal);
alert("Hello");
}
else{
alert("jjhv");
}
}
<html>
<body>
<form>
<input type="text" id="o">
<input type="submit" id="o" value="jhgf" onclick="a()">
</form>
</body>
</html>
Here is a working code after correcting some errors in code
I want the nameVerification() function to throw the alert() message when the user hits submit. For example, if the user enters something like 45 in the name field, I want that alert in nameVerification() function to be called. Right now, when the user does type in a number in the name field, the alert() in the formSubmission() function is being called.
Side note:
formSubmissionfunction works perfectly. In other words, if the user enters a number < 13 in the age field, the functions alert() gets called normally with no problems. If the user enters a number > 13, it works, also, without a problem. Just thought I'd let you guys know that too.
signUp.html
<!DOCTYPE html>
<html>
<head>
<title>Signup Form</title>
<script type="text/javascript" src="signUp.js"></script>
</head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="signUp.css">
<body>
<form class="col-md-4 col-md-offset-4" name="formHandler" id="handle">
<div class="moveUsername">
<label for="usr">Name:</label>
<input type="field" class="form-control" id="nameVerify" placeholder="Username" required="required">
</div>
<div class="ageMovement">
<label for="usr" >Age (Must be 13 years or older to play):</label>
<input type="field" class="form-control" id="ageVerify" name="ageChecker" placeholder="Age" required="required">
</div>
<button type="submit" class="btn btn-default" onclick="formSubmission()" onclick="nameVerification()">Submit</button>
</form>
</body>
</html>
signUp.js
function nameVerification() {
var name = document.getElementById("nameVerify").value;
if(typeof name !== 'string') {
alert("That's not a name!");
}
}
function formSubmission() {
var age = document.getElementById("ageVerify").value;
if(age < 13) {
alert("You're too young, you can't play the game");
}
}
age is also a string in this function:
function formSubmission() {
var age = document.getElementById("ageVerify").value;
if(age < 13) {
alert("You're too young, you can't play the game");
}
}
If you want to do a numeric compare, you need to parse first:
function formSubmission() {
var age = document.getElementById("ageVerify").value;
if (age) {
var ageInteger = parseInt(age, 10);
if (ageInteger < 13) {
alert("You're too young, you can't play the game");
}
}
}
You have two onclick attributes on the button
<button type="submit" class="btn btn-default" onclick="formSubmission()" onclick="nameVerification()">Submit</button>
You can only have one
Your typeof test is failing because the value returned from a text input is always of type string. You can test to see if a provided text value is numeric with the following function:
function isNumeric(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
The real answer, however, is that you'll need to improve your input validation tests to determine what you want, rather than test for all the things you don't want. For example, testing for a numeric value as above would not work if someone entered "t#^!" in the field, which is likely not a value you would want in a name field. This is where regular expressions, and the built-in validations from HTML5 fields can help.
You can change your nameVerification function as follows:
function nameVerification() {
var name = document.getElementById("nameVerify").value;
if (name) {
var num = parseInt(name) || -1;
if (num >= 0 && num < 13) {
alert("That's not a name!");
}
}
}
and change your onclick values in the html to be:
onclick="formSubmission();nameVerification()"
it's because the javascript is not loaded yet.
Move:
<script type="text/javascript" src="signUp.js"></script>
To just above the </body> tag.
You should use parseInt:
var age = parseInt(document.getElementById("ageVerify").value);