Как сделать окно предупреждения и innerHTML показать в javascript

Question

Я пытаюсь сделать калькулятор зарплаты с помощью простого валидатора полей JavaScript. Однако, когда я добавляю свои условные выражения, они, похоже, отменяют друг друга. Я не уверен, что мне нужно сделать еще одну функцию, чтобы это произошло.

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. Надеюсь, что это сработает.