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

我試圖用簡單的javascript字段驗證器製作工資計算器。但是，當我添加條件if語句時，他們似乎相互抵消。我不確定是否需要製作另一個功能來實現此目的。如何在javascript中顯示警告框和innerHTML

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()">

來源

2015-10-04 LazerStackr

您應該學會使用控制檯來幫助您調試JavaScript代碼（https://gyazo.com/a660a26614794aaa7b42a6739b712af2）。 – Script47

也考慮使用'isNaN（）'和'trim（）'。 – Script47

我懷疑這個值是否等於'「」'，你不打算在函數內部進行工資檢查。 – epascarello

有4個問題在這裏：

你的括號沒有正確關閉。
您聲明變量名稱rate但您檢查變量名稱payrate。
你的邏輯不好。您應該先驗證數據，然後再進行計算。
你應該改變檢查空字符串的方式。檢查空字符串時您有空間（' '）。這將導致錯誤的結果。應該使用''。但是，我建議在我的代碼中使用另一種方法。

因此，新的代碼是：

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進行測試。

來源

2015-10-05 00:50:36 AnhTriet

您的支架沒有正確關閉。

試試這個：

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

來源

2015-10-04 23:42:32 Shilly

你的邏輯是壞的，括號沒有正確關閉試試這個：

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

來源

2015-10-05 00:01:33

在'if'語句中，您的代碼類似於salary = "The salary is too little"。也許你打算做一些像console.log("The salary is too little")？或者您可以使用警報而不是console.log。希望工程。

來源

2017-05-10 20:20:28

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

回答

相關問題