for loop works fine with console.log but not innerHTML?

Question

hello i'm very new to javascript so forgive me if the answer seems obvious...

this is my code which is executed at the click of a button in the body

function q() { 

    var A = document.getElementById("time_one").value;
    var B = document.getElementById("time_two").value;
    var C = document.getElementById("post_number").value;

    var D = (B - A) / C;

    for ( var x = A; x < B; x = x + D ) {

    document.getElementById("q_box").innerHTML = x + "<br />";

    }


}

i'm pretty sure the error is in the for loop... the output is supposed to be a list of numbers between A and B. and changing the innerHTML = to innerHTML += hasn't worked either?

Answer 1

function q() { 

    var A = +document.getElementById("time_one").value;
    var B = +document.getElementById("time_two").value;
    var C = +document.getElementById("post_number").value;

    var D = (B - A) / C;

    for ( var x = A; x < B; x = x + D ) {

    document.getElementById("q_box").innerHTML += x + "<br />";

    }

}

You should convert the values in int and you should use +=

Answer 2

With innerHTML code inside the for loop you are always setting the value with the last time iterated value. Hence, you need to update your code to

 for ( var x = A; x < B; x = x + D ) {

    document.getElementById("q_box").innerHTML += x + "<br />";

    }

OR

var y = "";
 for ( var x = A; x < B; x = x + D ) {

     y += x + "<br />";

    }
document.getElementById("q_box").innerHTML = y;

I will recommend you to go for 2nd option, as it is better to set the updated value at once and not to extract the value and update for each iteration.