如何在 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

你的括号没有正确闭合。

试试这个：

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 2

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

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 3

这里有 4 个问题：

你的括号没有正确闭合。
您声明了一个变量名 rate 但您检查了一个变量名 payrate。
你的逻辑不好。您应该先验证数据，然后再进行计算。
检查空字符串的方式应该改变。检查空字符串 (' ') 时出现 space。会导致错误的结果。 '' 应该改用。但是，我建议在我的代码中使用另一种方法。

所以，新代码是：

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 4

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

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

How to make alert box and innerHTML show in javascript

html

javascript

validation

innerhtml