How to make alert box and innerHTML show in javascript

Question

I'm trying to make a salary calculator with a simple javascript field validator. However, when I add my conditional if statements they seem to cancel each other out. I'm not sure if I need to make another function to make this happen.

 function myFunction() { var rate = document.getElementById("payrate").value; var hours = document.getElementById("hours").value; var salary; salary = rate * hours; if (hours == ' '){ alert("Fill hours"); else if (payrate == ' '){ alert("Fill payrate"); } } if (salary < 20000) { salary = "The salary is too little"; }else if(salary > 20000 && salary < 25000){ salary = "Let's negotiate"; } else { salary = "This good salary"; document.getElementById("demo").innerHTML = salary; } } 

 <p id="demo"></p> Enter hourly Rate: <input type="text" id="payrate"><br> Enter hours: <input type="text" id="hours"><br> <input type="submit" value="Yearly Salary" onclick="myFunction()"> 

Answer 1

There are 4 issues here:

1. Your brackets are not closed correctly.
2. You declare a variable name rate but you check a variable name payrate .
3. Your logic is not good. You should validate data first, then do the calculation.
4. The way you check for empty string should be changed. You have a space when checking for empty string ( ' ' ). It will lead to wrong result. '' should be used instead. However, I suggest another way in my code.

So, the new code is:

function myFunction() {
    var rate = document.getElementById("payrate").value;
    var hours = document.getElementById("hours").value;
    var salary;

    // Validate data first
    if (!hours) {
        alert("Fill hours");

        // Stop the execution
        return false;
    } else if (!rate) {
        alert("Fill payrate");

        // Stop the execution
        return false;
    }
    salary = rate * hours;

    if (salary < 20000) {
        salary = "The salary is too little";
    } else if (salary > 20000 && salary < 25000) {
        salary = "Let's negotiate";
    } else {
        salary = "This good salary";
    }

    document.getElementById("demo").innerHTML = salary;
}

You can test this on JsFiddle .

Answer 2

Your brackets aren't closed properly.

Try this:

function myFunction() {
var rate = document.getElementById("payrate").value;
var hours = document.getElementById("hours").value;
var salary;
salary = rate * hours;
if (hours == ' ') {
    alert("Fill hours");
}
else if (payrate == ' ') {
    alert("Fill payrate");
}
if (salary < 20000) {
    salary = "The salary is too little";   
} else if(salary > 20000 && salary < 25000){
    salary = "Let's negotiate";
} else { 
    salary = "This good salary";
}
document.getElementById("demo").innerHTML = salary;
}

Answer 3

Your logic is bad and the brackets aren't closed properly try this:

function myFunction() {
var rate = document.getElementById("payrate").value;
var hours = document.getElementById("hours").value;
var salary;

salary = rate * hours;

//With out reurn false; the flow will still continue and return an value in the demo
   // and also check for if hours is a number

if (hours === '' || isNaN(hours)){
alert("Fill hours");
    return false;
}


//With out reurn false; the flow will still continue and return an value in the demo
   // and also check for if payrateis a number.

if (payrate === '' || isNaN(payrate) ){
alert("Fill payrate");
    return false;
}

 if (salary < 20000) {
 salary = "The salary is too little";   
}else if(salary > 20000 && salary < 25000){
  salary = "Let's negotiate";
  } else { 
 salary = "This good salary";
}
document.getElementById("demo").innerHTML = salary;
}

Answer 4

In the 'if' statements, you have code like salary = "The salary is too little" . Maybe you meant to do something like console.log("The salary is too little") ? Or you could use an alert instead of console.log. Hope that works.