Why is my switch not working? - javascript

I have a switch statement to give you a letter mark if you enter a number mark. I am not getting any errors from chrome so i don't know what i am doing wrong. Would i be just formatting it wrong?
<html>
<body>
<h1>Rank Your Mark!!</h1>
Enter your mark to rank it.
<input type="number" name="grade" id="mark">
<input type="button" name="mark" id="grade" value="Rate" onclick="rateMark()">
<script>
function rateMark(){
switch(grade)
{
case"F":
mark > 50;
break;
case"D":
mark >= 50 && mark <=59.9;
break;
case"C":
mark >= 60 && mark <=69.9;
break;
case"B":
mark >= 70 && mark <= 79.9;
break;
case"A":
mark >= 80 && mark <= 89.9;
break;
case"A+":
mark >= 90 && mark <= 100;
break;
}
document.getElementById("demo").innerHTML = "You got a" + mark;
}
</script>
<br>
<p id="demo"></p>
</body>
</html>

You're not using the right way, check how it works here.
What you're doing is compare if grade variable is "F", "D", "C".....
Use if and else if and put your statements into them, like this:
var mark = document.getElementById('mark').value // gets the input value to "mark" variable
if(mark >= 70 && mark <= 79.9){
// do something here
} else if(mark >= 80 && mark <= 89.9){
// do another thing here
}
so on...

See this:
<body>
<h1>Rank Your Mark!!</h1>
Enter your mark to rank it.
<input type="number" name="grade" id="mark">
<input type="button" name="mark" id="grade" value="Rate" onclick="rateMark()">
<script>
function rateMark(){
mark = document.getElementById("mark").value
if (mark < 50) {
mark = "F"
} else if (mark >= 50 && mark <=59.9) {
mark = "E"
} else if (mark >= 60 && mark <=69.9) {
mark = "D"
} else if (mark >= 70 && mark <= 79.9) {
mark = "C"
} else if (mark >= 80 && mark <= 89.9) {
mark = "B"
} else if (mark >= 90 && mark <= 100) {
mark = "A"
}
document.getElementById("demo").innerHTML = "You got a " + mark;
}
</script>
<br>
<p id="demo"></p>
</body>

Related

make an html and javascript to classified person based on their age

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>

How to add several options for user input in an if statement

I'm trying to make a code where you can get a letter grade from a percentage grade. The grading scale is printed at the top of the code. Then, I made a button where when you click it, it prompts the suer to input their percentage grade. Im trying to make it so if the user inputs, for example, 93 the code will tell them they have an A. Im trying to do this for all values of 100-90 for an A, 89-80 for a B, 79-70 for a C, 69-60 for a D, 59-50 for an E, and anything less than 50 for an F. I have the code for the grade scale and I started the function for the function that will give the user their letter grade, but cannot figure out how to have more than one value in the if statement.
function myFunction() {
var q1 = prompt("Please enter your percentage grade: ");
if (q1 <= 100 && grade > 90) {
alert("You have an A");
}
if (q1 <= 89 && grade > 80) {
alert("You have a B");
}
if (q1 <= 79 && grade > 70) {
alert("You have a C");
}
if (q1 <= 69 && grade > 60) {
alert("You have a D");
}
if (q1 <= 59 && grade > 50) {
alert("You have an E");
}
if (q1 > 50) {
alert("You have an F");
} else {
alert("Broken")
}
}
<html>
<body>
<h1>Grade Scale</h1>
<p>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
</tr>
<tr>
<td>100-90</td>
<td>89-80</td>
<td>79-70</td>
<td>69-60</td>
<td>59-50</td>
<td>
< 50</td>
</tr>
</table>
</p>
<p2>
<button onclick="myFunction()">Click Here To See Your Conversion!</button>
</p2>
</body>
</html>
You can achieve this with if - else statements. This will ensure that only one condition matches for all the if blocks - and you also need just a single condition for each if statement:
<p>
<button onclick="myFunction()">Click Here To See Your Conversion!</button>
</p>
<script>
function myFunction() {
var grade = prompt("Please enter your percentage grade: ");
if (grade > 90) {
alert("You have an A");
}
else if (grade > 80){
alert("You have a B");
}
else if (grade > 70){
alert("You have a C");
}
else if (grade > 60){
alert("You have a D");
}
else if (grade > 50){
alert("You have an E");
}
else {
alert("You have an F");
}
}
</script>
By the way: please check your variables and use the same name for all (q1 and grade should be the same I guess).
The main issue was that your variables were not named consistently, so I changed them all to q1. Your logic with the > conditions was also a bit off, so I changed them so they account for the correct ranges. Remember, for something like a B, it will be all numbers less than 90 and greater than or equal to 80. 90 > B >= 80
Also as others have mentioned <p1> and <p2> are not proper html tags. Please use <p> instead.
function myFunction() {
var q1 = prompt("Please enter your percentage grade: ");
if (q1 <= 100 && q1 >= 90) {
alert("You have an A");
}
else if (q1 < 90 && q1 >= 80) {
alert("You have a B");
}
else if (q1 < 80 && q1 >= 70) {
alert("You have a C");
}
else if (q1 < 70 && q1 >= 60) {
alert("You have a D");
}
else if (q1 < 60 && q1 >= 50) {
alert("You have an E");
}
else if (q1 < 50 && q1 >= 0) {
alert("You have an F");
}
else {
alert("Broken")
}
}
<!DOCTYPE html>
<html>
<body>
<h1>
Grade Scale
</h1>
<p>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
</tr>
<tr>
<td>100-90</td>
<td>89-80</td>
<td>79-70</td>
<td>69-60</td>
<td>59-50</td>
<td>< 50</td>
</tr>
</table>
</p>
<p>
<button onclick="myFunction()">Click Here To See Your Conversion!</button>
</p>
</body>
</html>

How to have user input in an if statement have multiple right answers

I'm trying to make a code where a user can input their percentage grade and they will receive a letter grade. I printed out the scale at the top of the code and then I have a button where the user would click to start the function. I want the code to give the user a letter grade if they type in a percentage in the user input and have the if statement include all values that will satisfy it.
function myFunction() {
var q1 = prompt("Please enter your percentage grade: ");
if (q1 <= 100 && grade > 90) {
alert("You have an A");
}
if (q1 <= 89 && grade > 80) {
alert("You have a B");
}
if (q1 <= 79 && grade > 70) {
alert("You have a C");
}
if (q1 <= 69 && grade > 60) {
alert("You have a D");
}
if (q1 <= 59 && grade > 50) {
alert("You have an E");
}
if (q1 > 50) {
alert("You have an F");
} else {
alert("Broken")
}
}
var q2 = prompt("Would you like to enter another grade? (Please type Yes or No) ");
if (q2 == Yes) {
// This is where the loop would go
} else() {
break
}
}
<!DOCTYPE html>
<html>
<body>
<h1>
Grade Scale
</h1>
<p1>
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
<th>E</th>
<th>F</th>
</tr>
<tr>
<td>100-90</td>
<td>89-80</td>
<td>79-70</td>
<td>69-60</td>
<td>59-50</td>
<td>
< 50 </td>
</tr>
</table>
</p1>
<p2>
<button onclick="myFunction()">Click Here To See Your Conversion!</button>
</p2>
</body>
</html>
I would recommend using else if to ensure that the alert only happens once and returns only the desired letter grade.
if (q1 >= 90) {
alert("You have an A");
}
else if (q1 >= 80) {
alert("You have a B");
}
else if (q1 >= 70) {
alert("You have a C");
}
else if (q1 >= 60) {
alert("You have a D");
}
else if (q1 >= 50) {
alert("You have an E");
}
else if (q1 < 50) {
alert("You have an F");
}
else {
alert("Broken")
}
It is also a good idea to validate at the top to catch invalid entries etc.
if (q1 < 0 || q1 > 100) {
alert("Invalid percentage entered.");
} else if ...

Write a JavaScript conditional statement to find the sign of product of three numbers. Display an alert box with the specified sign

I want to write a JavaScript conditional statement to find the sign of product of three numbers. Display an alert box with the specified sign. The three numbers have to be written in input fields. And when I click on an OK button, it should tell me what sign of product I have. Is it a postive number(+) or negative(-)?
<body>
Please enter numbers that aren't 0.
<input id="x" type="text" name="" value="">
<input id="y" type="text" name="" value="">
<input id="z" type="text" name="" value="">
<button type="onclick" onclick="value()" name="button">OK</button>
<script>
function value() {
document.getElementById('x').innerHTML;
document.getElementById('y').innerHTML;
document.getElementById('z').innerHTML;
if (x>0 && y>0 && z>0)
{
alert("The sign is +");
}
else if (x<0 && y<0 && z<0)
{
alert("The sign is +");
}
else if (x>0 && y<0 && z<0)
{
alert("The sign is +");
}
else if (x<0 && y>0 && z<0)
{
alert("The sign is +");
}
else
{
alert("The sign is -");
}
}
</script>
</body>
</html>
Why not multiply them then set the condition on the product?
const x = document.getElementById('x').value;
const y = document.getElementById('y').value;
const z = document.getElementById('z').value;
const product = x*y*z;
let sign = (product < 0) ? '-' : '+';
sign = (product === 0) ? 'Neither' : sign;
alert(sign);
You should parse value of input fields using
var x = Number("Your input field");
Then Your variable will be treated as integer and Your condition of bigger or smaller than 0 will work.
Input elements have a value not, innerHTML
Even if you would have corrected that, you will not have values, since you did not assign them to any variable
For number only input use the number type, this will prevent someone from entering not numeral characters (in all modern browsers)
document.getElementById('check-value').addEventListener('click', (e) => {
const x = document.getElementById('x').value;
const y = document.getElementById('y').value;
const z = document.getElementById('z').value;
if (x + y + z >= 0) {
alert("The sign is +");
} else if (x < 0 && y < 0 && z < 0) {
alert("The sign is +");
} else if (x > 0 && y < 0 && z < 0) {
alert("The sign is +");
} else if (x < 0 && y > 0 && z < 0) {
alert("The sign is +");
} else {
alert("The sign is -");
}
});
Please enter numbers that aren't 0.<br>
<input id="x" type="number" name="" value="">
<input id="y" type="number" name="" value="">
<input id="z" type="number" name="" value="">
<button type="button" id="check-value" name="button">OK</button>

Javascript conditional statements with range input values

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
}

Categories