Возникли проблемы с подсчетом итераций различных выходных данных в моем коде JavaScript - PullRequest
0 голосов
/ 31 января 2019

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

function mapping() {
    var num = parseInt(document.getElementById("num1").value);
    var countp = 0;
    var countn = 0;

    if (num !== 0) {
        if (num > 0) {
            document.getElementById("output").innerHTML = "positive";
            countp += 1;
        } else {
            document.getElementById("output").innerHTML = "negative";
            countn += 1;
        }
    } else {
        document.getElementById("output").innerHTML = "countp: " + countp;
        document.getElementById("output").innerHTML = "countn: " + countn;
    }
}

Спасибо.

Ответы [ 2 ]

0 голосов
/ 31 января 2019

Основная проблема с кодом заключается в том, что 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;
}
0 голосов
/ 31 января 2019

Две проблемы с кодом.

  • 1-й: вам нужно переместить countp и countn за пределы функции, чтобы сделать их глобальными.
  • 2-й: вы записываете положительные числа в html выходных данных итогда вы переопределяете его отрицательным счетом.

Это должно сработать;

var countp = 0;
var countn = 0;

function mapping() {
    var num = parseInt(document.getElementById("num1").value);

    if (num !== 0) {
        if (num > 0) {
            document.getElementById("output").innerHTML = "positive";
            countp += 1;
        } else {
            document.getElementById("output").innerHTML = "negative";
            countn += 1;
        }
    } else {
        var html =  "countp: " + countp + ", countn: " + countn;
        document.getElementById("output").innerHTML = html;

        // this line added
        countp = 0, countn = 0;
    }
}
<input type="text" id="num1">
<button onclick="mapping()">Test</button>

<div id="output">

</div>
...