如何在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。 希望有效。