Having trouble counting iterations of different outputs in my javascript code

Question

Trying to set up code to take inputted numbers, determine whether they are negative or positive, displaying this, and then when 0 is put in the code displays the amount of positive numbers put in and the amount of negative numbers put in and then terminates. Having trouble with the counting part and I am not sure how to set this up better. I am also not sure how to set this up to terminate after 0 is put in.

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

Thank you.

-There is lacking information. Do you want the user to input the number and then click button to run this process? -First of all you should take out of the function those count variables. If the function runs everytime you evaluate a number, then everytime you do it you are reseting the counters to zero. the inizialization to the variables must run only once — Santi
– Santi, Commented Jan 31, 2019 at 18:06
There should be some user gesture, like clicking a button, or changing input text, then you can run your code after that. — behzad besharati
– behzad besharati, Commented Jan 31, 2019 at 18:06

arunes · Accepted Answer · 2019-01-31 18:28:15Z

1

Two problems with the code.

1st: You need to move countp and countn outside of the function to make them global.
2nd: You are writing the positive number counts to output's html and then you are overriding it by negative count.

This should do the trick;

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>

edited Jan 31, 2019 at 18:28

answered Jan 31, 2019 at 18:06

arunes

3,5242 gold badges23 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Naruto Abidal Over a year ago

Yes, I have this linked to an HTML so their is already a button. Would you happen to know how I can make the loop reset/terminate if 0 is entered.

arunes Over a year ago

There is no loop in this code, do you want to reset counters after 0 is entered?

Naruto Abidal Over a year ago

Yes, sorry about the confusion.

konst · Accepted Answer · 2019-01-31 18:21:34Z

The main issue with the code is that countp and countn are local variables. Thus they are created and initialized to 0 every time the function is called. Move the two lines outside the function to fix this bug!

Another bug is the code in the last else part. There you set innerHTML twice, so the div ends up with only countn. To fix this bug, replace the last innerHTML = by innerHTML +=.

Finally, if I understand you correctly, you want that no more updates occur once 0 has been entered. To achieve this, you could add another variable like isFinal that is set to true when the user enters 0, and add a check to your function.

Some more suggestions:

Instead of if (num!==0), it is considered good practice to start with positive conditions such as if (num === 0). That way, you will also avoid some nesting in the conditions.
What happens if the user does not enter a valid number? In your code, this will be treated as negative number. Add a test for "NaN" to fix this.
You repeat the document.getElementById... many times. Use a temporary variable to fix this.
In modern JavaScript, it is recommended to use let or const instead of var.
Be consistent in your use of semicolons at the end of lines.

Thus the code ends up as:

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

Collectives™ on Stack Overflow

Having trouble counting iterations of different outputs in my javascript code

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related