I want to do my JavaScript revision but I got stuck to this question. is there a simple code of html and JavaScript to achieve the answers to these question?
I have tried a simple look of html and JavaScript. but since I am a beginner. some words in this question I may find it hard.
<!DOCTYPE html>
<html>
<script src="js/age.js" language="javascript"></script>
<script>
function myFunction() {
var msg;
if (age == 0 && age <= 2) {
msg = "Toddler";
} else if (age == 3 && age <= 11) {
msg = "Child";
} else if (age == 12 && age <= 17) {
msg = "Adolescent";
} else {
msg = "Adult";
}
document.getElementById("demo").innerHTML = msg;
}
</script>
<body> Age: <input type="text"> <button onsubmit="return myFunction()">Find Category</button> </body>
</html>
less than or equal is <= - the => is called a fat arrow and used in the arrow function below
onclick is the event, but use an eventListener
You do not store the age from the input field
You do not have a demo element
Here is a better script. Please study it.
window.addEventListener("DOMContentLoaded", () => { // when the page has loaded
const findButton = document.getElementById("find");
const demo = document.getElementById("demo");
findButton.addEventListener("click", e => { // clicking the button
let msg;
let age = document.getElementById("age").value;
if (age >= 0 && age <= 2) {
msg = "Toddler";
} else if (age >= 3 && age <= 11) {
msg = "Child";
} else if (age >= 12 && age <= 17) {
msg = "Adolescent";
} else {
msg = "Adult";
}
demo.innerHTML = msg;
});
});
Age: <input type="text" id="age"> <button type="button" id="find">Find Category</button>
<span id="demo"></span>
Related
It seems like I can't find why it shows EVERYTIME I type in something. It's supposed to only shows when user types in letter or negative numbers. Does it have something to do with "else"?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Examus</title>
</head>
<body>
<h1 id="label"></h1>
<input type="text" id="input">
<button onclick="checkAge()">Check Age</button>
<script>
const checkAge = () => {
const input = document.getElementById("input");
const inputValue = parseInt(input.value);
let output;
if (Number.isInteger(inputValue) || inputValue < 0) {
output = "Invalid Value";
document.getElementById("label").innerText = output;
return;
}
if (inputValue < 14 && inputValue > 0) {
output = "This person is a KID";
} else if (inputValue > 14 && inputValue < 18) {
output = "This person is a TEEN";
} else if (inputValue > 18 && inputValue < 60) {
output = "This person is a ADULT";
} else if (inputValue > 60) {
output = "This person is a SENIOR";
} else {
output = "Invalid Value";
}
document.getElementById("label").innerText = output;
}
</script>
</body>
</html>
I bet you wanted to say: If it is not a number or it is less than zero here:
if( Number.isInteger(inputValue) || inputValue < 0 ) {
So you need to add boolean inversion before call to Number.isInteger:
if( ! Number.isInteger(inputValue) || inputValue < 0 ) {
Also, you will need to use the operator "less or equal" (<=) or "greater or equal" (>=), so your condition will include ages 14, 18 and 60:
if (!Number.isInteger(inputValue)) {
document.getElementById("label").innerText = "Invalid Value";
return;
}
if (inputValue >= 0 && inputValue < 14) {
output = "This person is a KID";
} else if (inputValue >= 14 && inputValue < 18) {
output = "This person is a TEEN";
} else if (inputValue >= 18 && inputValue < 60) {
output = "This person is a ADULT";
} else if (inputValue >= 60) {
output = "This person is a SENIOR";
} else {
output = "Invalid Value";
}
I am making a website in HTML and for the admin part, I want it to have an input which needs a password to show the admin page.
I tried going to w3schools and tried this code:
<button onclick="1()" id="id" >ok</button>
<input id="id2">
function 2(){
var x = document.getElementById("thedminpage");
if (x.innerHTML === "Hello") {
x.innerHTML = "Swapped text!";
} else {
x.innerHTML = "Hello";
}
}
function 1() {
var x, text;
x = document.getElementById("id2").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 {
run function 2()
}
document.getElementById("demo").innerHTML = text;
}
It didn't work. Can someone help?
I see some problems here:
You can't name a function function() because it's a keyword of the language.
You can't name a function with a number, maybe you could use func2()
You are getting some DOM objects that are not in the HTML code.
Try this:
<button onclick="fun2" id="id" >ok</button>
<input id="id2">
<p id='demo'></p>
function func1(){
var x = document.getElementById("thedminpage");
if (x.innerHTML === "Hello") {
x.innerHTML = "Swapped text!";
} else {
x.innerHTML = "Hello";
}
}
function func2() {
var x, text;
x = document.getElementById("id2").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 {
func2();
}
document.getElementById("demo").innerHTML = text;
}
could someone help me with the following Javascript code. I want the conditional statements to execute if the value of "score" is between the ranges of 1-3, 3-5, 5-7, 7-9 and 9-10.
Currently, they only execute if the variable "score" is an integer, but I want the scores to be executed between the range of numbers.
for example, I want the line "if ((score==1) || (score==2) || (score==3))" to be something like if( score is between 1 and 3), Then the statement will be executed.
This is the HTML:
Input 1 <input type="number" id="num1">
<br>
<br>
Input 2 <input type="number" id="num2">
<br>
<br>
Input 3 <input type="number" id="num3">
<br>
<br>
Input 4 <input type="number" id="num4">
<br>
<br>
Input 5 <input type="number" id="num5">
<br>
<br>
<button onclick="calculate()">Calculate</button>
<h1 id="answer"></h1>
<h1 id="advice"></h1>
This is the JS:
function calculate()
{
var field1=document.getElementById("num1").value;
var field2=document.getElementById("num2").value;
var field3=document.getElementById("num3").value;
var field4=document.getElementById("num4").value;
var field5=document.getElementById("num5").value;
if ( (field1>10) || (field1<1)|| (field2>10) || (field2<1) || (field3>10) || (field3<1) || (field4>10) || (field4<1) || (field5>10) || (field5<1))
{
alert("Enter a number between 1 and 10");
return false;
}
var result=parseFloat(field1)+parseFloat(field2)+parseFloat(field3)+parseFloat(field4)+parseFloat(field5);
var score= result / 5;
if ((score==1) || (score==2) || (score==3))
{
document.getElementById("advice").innerHTML="You are between 1 and 3";
}
if ((score==4) || (score==5))
{
document.getElementById("advice").innerHTML="You are between 4 and 5";
}
if ((score==6) || (score==7))
{
document.getElementById("advice").innerHTML="You are between 6 and 7";
}
if ((score==8) || (score==9))
{
document.getElementById("advice").innerHTML="You are between 8 and 9";
}
if ((score==10))
{
document.getElementById("advice").innerHTML="You are 10";
}
if(!isNaN(score))
{
document.getElementById("answer").innerHTML="Your career score is " + score;
}
}
Help will be super appreciated!
if (score >= 1 && score < 3) {
// do something
} else if (score >= 3 && score < 5) {
// do something
}
... and so on
Also I would like to help you write better code:
This:
if ( (field1>10) || (field1<1)|| (field2>10) || (field2<1) || (field3>10) || (field3<1) || (field4>10) || (field4<1) || (field5>10) || (field5<1))
{
alert("Enter a number between 1 and 10");
return false;
}
And more cleaner code:
const fault = [field1, field2, field3, field4, field5].find(el => {
if (el < 1 || el > 10) { // if we find this, then fault will be the index of this element
return true
} else { return false } // else fault will be undefined
})
if (fault) {
alert("Enter a number between 1 and 10")
return false
}
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I have a problem with my if statement that is tasked with checking the input fields and giving me a message that will say if my fields are empty. The problem is I wanted to put it inside of a function so that if the if statement is false it would automatically proceed on with the function and do the task it was meant to do.
As you can see almost all of the functions have the if statement in them.
(I'm making a calculator).
Oh, and please use this basic JavaScript as I did. My knowledge of JavaScript is still not very good and since I'm doing this for a school assignment I should probably use this type of codes.
I will post my code here:
<html>
<head>
<meta charset="utf-8"/>
<script>
function pozdrav()
{
alert("Unesite dva broja te odaberite željenu operaciju:");
}
function brisi()
{
var prvibroj = "";
var drugibroj = "";
var rezultat = "";
document.getElementById("prvibroj").value = prvibroj;
document.getElementById("drugibroj").value = drugibroj;
document.getElementById("rezultat").value = rezultat;
}
function boja(elem)
{
var elem = elem.style.color="red";
}
function staraboja(elem)
{
var elem = elem.style.color="black";
}
function promjena()
{
var rezultat="";
document.getElementById("rezultat").value = rezultat;
}
function plus()
{
var prvibroj = parseInt(document.getElementById("prvibroj").value);
var drugibroj = parseInt(document.getElementById("drugibroj").value);
if(prvibroj == "" || drugibroj == "")
{
alert("Za ispravan izračun, morate unijeti oba broja!");
}
else
{
var rezultat = prvibroj + drugibroj;
document.getElementById("rezultat").value = rezultat;
}
}
function minus()
{
var prvibroj = parseInt(document.getElementById("prvibroj").value);
var drugibroj = parseInt(document.getElementById("drugibroj").value);
if(prvibroj == "" || drugibroj == "")
{
alert("Za ispravan izračun, morate unijeti oba broja!");
}
else
{
var rezultat = prvibroj - drugibroj;
document.getElementById("rezultat").value = rezultat;
}
}
function mnozenje()
{
var prvibroj = parseInt(document.getElementById("prvibroj").value);
var drugibroj = parseInt(document.getElementById("drugibroj").value);
if(prvibroj == "" || drugibroj == "")
{
alert("Za ispravan izračun, morate unijeti oba broja!");
}
else
{
var rezultat = prvibroj * drugibroj;
document.getElementById("rezultat").value = rezultat;
}
}
function djeljenje()
{
var prvibroj = parseInt(document.getElementById("prvibroj").value);
var drugibroj = parseInt(document.getElementById("drugibroj").value);
if(prvibroj == "" || drugibroj == "")
{
alert("Za ispravan izračun, morate unijeti oba broja!");
}
else
{
var rezultat = prvibroj / drugibroj;
document.getElementById("rezultat").value = rezultat;
}
}
</script>
</head>
<body onload="pozdrav()">
<h2>Kalkulator</h2>
<p>Prvi broj:</p>
<input type="text" id="prvibroj" onmouseover="boja(this)" onmouseout="staraboja(this)" onchange="promjena()" /> <br />
<p>Drugi broj:</p>
<input type="text" id="drugibroj" onmouseover="boja(this)" onmouseout="staraboja(this)" onchange="promjena()" /> <br />
<p>Rezultat:</p>
<input type="text" id="rezultat" onmouseover="boja(this)" onmouseout="staraboja(this)" onchange="promjena()" /> <br /> <br />
<input type="button" value="+" onclick="plus()"/>
<input type="button" value="-" onclick="minus()"/>
<input type="button" value="*" onclick="mnozenje()"/>
<input type="button" value="/" onclick="djeljenje()"/>
<input type="button" value="C" onclick="brisi()"/>
</body>
</html>
You are doing this:
var prvibroj = parseInt(document.getElementById("prvibroj").value);
which if document.getElementById("prvibroj").value is empty will set prvibroj to NaN.
Then you are comparing this variable as if it was a string:
if(prvibroj == "" || drugibroj == "")
but if the values are empty it's the same as if (NaN == "" || NaN == "") which will always evaluate to false (NaN is never equal to anything).
So one solution is to check for NaN instead of empty string. For example:
var prvibroj = parseInt(document.getElementById("prvibroj").value);
var drugibroj = parseInt(document.getElementById("drugibroj").value);
if(isNaN(prvibroj) || isNaN(drugibroj))
{
alert("Za ispravan izračun, morate unijeti oba broja!");
}
else
{
var rezultat = prvibroj + drugibroj;
document.getElementById("rezultat").value = rezultat;
}
(and the same for all the functions)
Since you are converting your input value to integer
var drugibroj = parseInt(document.getElementById("drugibroj").value);
the value in drugibroj if the field is blank will be NaN, So you should check for Nan in you if condition instead of ""
if(isNaN(prvibroj) || isNaN(drugibroj))
{
alert("Za ispravan izračun, morate unijeti oba broja!");
}
Not getting any errors in Aptana, so something I'm doing probably doesn't make sense. Basically, I am getting the value from a form and checking it against a regex. If the new checked variable isn't empty then I output to a different div that it is valid, and that it is not valid if the variable is empty.
<script type="text/javascript">
var age_regex=/(1[8-9]|2[0-9]|3[0-5])/;
var error_box= document.getElementById('error_box');
function checkAge(x){
var age = document.getElementById(x).value;
var checked_age = test.age_regex(age);
if (checked_age.value != "")
error_box.innerHTML = "Correct!";
else {
error_box.innerHTML = "Incorrect!";
}
}
</script>
Why regex for age ? How about this :
function checkAge(str) {
if(parseInt(str, 10) != str) {
return false;
}
if(parseInt(str, 10) < 18 || parseInt(str, 10) > 35)
{
return false;
}
}