#javascript #html
#javascript #HTML
Вопрос:
Я новичок в сочетании HTML с JavaScript. Это моя домашняя работа, и в моем коде есть некоторые проблемы, нужен эксперт, чтобы взглянуть. Вот в чем вопрос.
Если отработанное время превышает 40 часов, вычислите, используя обычную скорость в 1,5 раза больше для дополнительных часов. Например, если кто-то работает 50 часов и уплаченная ставка составляет 10,00 долларов США в час, общая сумма оплаты должна составлять 550,00 долларов США.
Мой код :
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calc() {
var employ_name = document.getElementById('employ_name').value;
var rate_pay = parseInt(document.getElementById('rate_pay').value);
var hour_work = parseInt(document.getElementById('hour_work').value);
if (hour_work <= 40) {
alert("Paid Amount For " employ_name " is RM " rate_pay * hour_work);
} else {
alert((40 * 1.5) (c - 40) * c * 1.5);
}
}
function calc() {
if (document.getElementById("employ_name").value == "") {
alert("PLEASE ENTER THE VALUE!");
return false;
} else if (document.getElementById("employ_no").value == "") {
alert("PLEASE ENTER THE VALUE!");
return false;
} else if (document.getElementById("rate_pay").value == "" {
alert("PLEASE ENTER THE VALUE!");
return false;
} else {
alert("PLEASE ENTER THE VALUE!");
return false;
}
}
</script>
<title></title>
</head>
<body>
<form action="url" METHOD="POST">
<table>
<tr>
<td>Employee Name :</td>
<td><input type="text" id="employ_name"></td>
</tr>
<tr>
<td>Employee No :</td>
<td><input type="text" id="employ_no"></td>
</tr>
<tr>
<td>Rate of Pay :</td>
<td><input type="text" id="rate_pay"></td>
</tr>
<tr>
<td>Hours Work :</td>
<td><input type="text" id="hour_work"></td>
</tr>
<tr>
<td><input type="button" id="Button" value="Submit" onclick="calc()"></td>
</tr>
</table>
</form>
</body>
</html>
Комментарии:
1. При вызове
calc()
какой из ваших двух функций вы ожидаете выполнить и почему? Какова цель второго, которое вы не ожидаете выполнить?2. У вас есть две функции с именами
calc()
.3. как мне поступить, если я хочу использовать одно имя функции для отображения результата, а также предупреждение о пустом текстовом поле?
4. @AlvisLim: Если вам нужны две функции, дайте им разные имена, чтобы вы могли их вызывать. Если вам нужна одна функция, используйте одну функцию.
Ответ №1:
У вас есть несколько проблем с вашим кодом:
-
В настоящее время ваш синтаксис неверен, вам нужно исправить это, добавив закрывающую скобку в ваш
if
оператор:(document.getElementById("rate_pay").value == "") {...}
-
У вас есть две функции с одинаковым именем. Вместо этого вам нужно присвоить вашей второй функции другое имя, например
checkInputs
, чтобы при вызовеcalc
функции она вызывала ожидаемую функцию. -
Ваша вторая
calc
функция (checkInputs
) не должна возвращаться,false
если всеif-statments
завершается неудачей. Вместо этого вы должны возвращать,true
если они всеfail
, поскольку это означает, что все они не пустые. -
Чтобы заставить вашу
calc
функцию проверять, что все ваши входные данные имеют значение внутри них, вы можете вызвать свою вторуюcalc
функцию (сейчасcheckInputs
) внутри вашей первойcalc
функции. Таким образом, вы можете использоватьif
инструкцию, чтобы проверить, возвращает ли чтоcheckInputs
, и, таким образом, действовать соответствующим образом.
Смотрите пересмотренный код ниже:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function calc() {
if (checkInputs()) { // check if `checkInputs` returned true or false
var employ_name = document.getElementById('employ_name').value;
var rate_pay = parseInt(document.getElementById('rate_pay').value);
var hour_work = parseInt(document.getElementById('hour_work').value);
if (hour_work <= 40) {
alert("Paid Amount For " employ_name " is RM " rate_pay * hour_work);
} else {
// commented out as you have not show us what "c" is:
// alert((40 * 1.5) (c - 40) * c * 1.5);
}
} else { // if check inputs returned false then you can output error message
alert("PLEASE ENTER THE VALUE!");
}
}
function checkInputs() {
if (document.getElementById("employ_name").value.trim() == "") {
return false;
} else if (document.getElementById("employ_no").value.trim() == "") {
return false;
} else if (document.getElementById("rate_pay").value.trim() == "") {
return false;
}
return true;
}
</script>
<title>Calculator</title>
</head>
<body>
<form action="url" method="POST">
<table>
<tr>
<td>Employee Name :</td>
<td><input type="text" id="employ_name"></td>
</tr>
<tr>
<td>Employee No :</td>
<td><input type="text" id="employ_no"></td>
</tr>
<tr>
<td>Rate of Pay :</td>
<td><input type="text" id="rate_pay"></td>
</tr>
<tr>
<td>Hours Work :</td>
<td><input type="text" id="hour_work"></td>
</tr>
<tr>
<td><input type="button" id="Button" value="Submit" onclick="calc()"></td>
</tr>
</table>
</form>
</body>
</html>
Примечание: В вашем checkInputs()
методе я также использовал .trim()
. Это удалит начальные / конечные пробелы во входных данных. Это означает, что если кто-то должен был ввести только пробелы, то checkInputts
вернет false
isntead of true
.
Комментарии:
1. Привет, Ник, спасибо за твое исправление. Теперь мой код может корректно выполняться с корректным выводом. Спасибо за ваш совет.
2. @AlvisLim не беспокойтесь :)))