CODEWITHSUNDEEP
javascript
Billy Payne
Billy Payne

Reputation: 99

How do I increment results using innerHTML

I have my code setup, I just cant get the results number to increment everytime the processUserText button is clicked, can someone point me in the right direction? 

function userHTML() {
    var uput = document.getElementById('uput').value;
    var num=1; 
    num = num ++;
    var html = num +  '.' + uput + '<br>' ;  
    //document.getElementById('result').innerHTML = html;
    document.getElementById("results").innerHTML += html;
} 
document.getElementById("processUserText").onclick = function() {

}
document.getElementById("reset").onclick = function(){  
    document.getElementById("results").innerHTML = "";
}
document.getElementById('processUserText').addEventListener("click", userHTML);

The HTML:

<input name="uput" id="uput" type="text" size="50" placeholder="Enter your input!"/>
<input type="button" value="processUserText" id="processUserText">
<input type="button" value="Reset" id="reset">
<div id="results"></div>

Upvotes: 0

Views: 3428

Answers (4)

yusufshakeel
yusufshakeel

Reputation: 449

try this. hope it helps...

    <!DOCTYPE html>
    <html>
    <head>
        <title>Index Page</title>
    </head>
    <body>
        <form>
            <input name="uput" id="uput" type="text" size="50" placeholder="Enter your input!"/>
            <input type="button" value="processUserText" id="processUserText">
            <input type="button" value="Reset" id="reset">
        </form>
        <div id="results"></div>

        <script type="text/javascript">
            var i = 0;
            function userHTML() {
                var uput = document.getElementById('uput').value;
                var num = i;
                var html = num +  '. ' + uput + '<br>' ;  
                document.getElementById("results").innerHTML += html;
            } 
            document.getElementById("processUserText").onclick = function() {
                i++;
                userHTML();
            }
            document.getElementById("reset").onclick = function() {
                i = 0;
                document.getElementById("results").innerHTML = "";
            }
        </script>
    </body>
    </html>

Upvotes: 1

orvi
orvi

Reputation: 3340

You declear num inside of function. So, what's happen for this ? Num is increasing but as it's declare inside of function it sets again into 1. So, you need to write it outside of the function :

var num=1;
function userHTML(){
}

Here's a working example:

https://jsfiddle.net/5sp846x7/

Upvotes: 0

afuous
afuous

Reputation: 1498

You have to declare the num variable outside of the function. If it is declared inside of the function, its value is not preserved between calls of the function.

Instead of

function userHTML() {
    var num = 1;
    num++;
    // get user input and show new value
}

Do something like this

var num = 1;
function userHTML() {
    // get user input and show new value
    num++;
}

Additionally, the line num = num++; does not actually increment num. All you need to do is num++. The reason for this is a subtle difference between num++, called postincrement, and ++num, preincrement. This code illustrates the difference:

var a = 1;
console.log(a++); // 1
console.log(a); // 2

var b = 1;
console.log(++b); // 2
console.log(b); // 2

Upvotes: 3

Quantumplate
Quantumplate

Reputation: 1104

Move var num=1; outside of the userHTML() function (otherwise it's always going to be set to 1 each time it's called).

And change num = num ++; to num++; as the first one just assigns num = num due to the precedence of the ++ operator.

Upvotes: 1

Related Questions