如何在javascript中显示警告框和innerHTML

Question

我正在尝试使用简单的javascript字段验证器制作工资计算器。 但是，当我添加条件if语句时，它们似乎相互抵消了。 我不确定我是否需要制作另一个功能来实现这一目标。

 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

这里有4个问题：

1. 您的括号未正确关闭。
2. 您声明变量名称rate但检查变量名称payrate 。
3. 你的逻辑不好。 您应首先验证数据，然后进行计算。
4. 应该更改检查空字符串的方式。 检查空字符串（ ' ' ）时有空格。 这会导致错误的结果。 ''应该用来代替。 但是，我建议在我的代码中采用另一种方式。

所以，新代码是：

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

你可以在JsFiddle上测试一下 。

Answer 2

您的括号未正确关闭。

尝试这个：

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

你的逻辑很糟糕，括号没有正确关闭试试这个：

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

在'if'语句中，你有像salary = "The salary is too little" 。 也许你打算做一些像console.log("The salary is too little")这样的事情console.log("The salary is too little") ？ 或者您可以使用警报而不是console.log。 希望有效。