Основная проблема с кодом заключается в том, что countp
и countn
являются локальными переменными.Таким образом, они создаются и инициализируются на 0
каждый раз, когда вызывается функция.Переместите две строки за пределы функции, чтобы исправить эту ошибку!
Другая ошибка - это код в последней части else
.Там вы устанавливаете innerHTML
дважды, так что div заканчивается только countn
.Чтобы исправить эту ошибку, замените последний innerHTML =
на innerHTML +=
.
Наконец, если я вас правильно понял, вы хотите, чтобы больше не происходило никаких обновлений после ввода 0.Чтобы добиться этого, вы можете добавить еще одну переменную, например isFinal
, для которой задано значение true
, когда пользователь вводит 0, и добавить проверку в вашу функцию.
Еще несколько предложений:
- Вместо
if (num!==0)
считается хорошей практикой начинать с положительных условий, таких как if (num === 0)
.Таким образом, вы также избежите некоторых вложений в условиях. - Что произойдет, если пользователь не введет правильный номер?В вашем коде это будет рассматриваться как отрицательное число.Добавьте тест для «NaN», чтобы это исправить.
- Вы повторяете
document.getElementById...
много раз.Для исправления используйте временную переменную. - В современном JavaScript рекомендуется использовать
let
или const
вместо var
. - Будьте последовательны в использовании точек с запятой приконец строки.
Таким образом, код заканчивается как:
let countp = 0;
let countn = 0;
let isFinal = false;
function mapping() {
if (isFinal) {
return;
}
const num = parseInt(document.getElementById("num1").value);
let html = "";
if (Number.isNaN(num)) {
html = "invalid";
} else if (num === 0) {
html = "countp: " + countp + "<br>";
html += "countn: " + countn;
isFinal = true;
} else if (num > 0) {
html = "positive";
countp += 1;
} else {
html = "negative";
countn += 1;
}
document.getElementById("output").innerHTML = html;
}