CODEWITHSUNDEEP
javascripthtml
Antonin Cezard
Antonin Cezard

Reputation: 2031

Incrementing a value and printing every step with innerHTML

I'm trying to get a list of values. Basically I'm trying to calculate columns widths for photoshop template, with JS. It looks like this : one 15px gutter, one 52px column, one 15px gutter, one 15px gutter, one 53px column, one 15 px gutter. Basically I need to add 36 values to my initial value, and print every step of that calculation.

So my loop consists of 6 elements. Here is what I did : 

col1 = 52;
col2 = 53;
gutter = 15;
result = 145;

for (i = 0; i <= 6; i++) {
    result = result + gutter;
    document.getElementById("result").innerHTML = result.toString();
    result = result + col1;
    document.getElementById("result").innerHTML = result.toString();
    result = result + gutter;
    document.getElementById("result").innerHTML = result.toString();
    result = result + gutter;
    document.getElementById("result").innerHTML = result.toString();
    result = result + col2;
    document.getElementById("result").innerHTML = result.toString();
    result = result + gutter;
    document.getElementById("result").innerHTML = result.toString();
}

If I replace innerHTML with a console.log, it will work perfectly. But I think it's better if it works with innerhtml. The problem is, with that function, the div#result will only show the last value of result variable. And I want to see every step..

By the way I think my function could be written better. There's a lot of repetition in it

EDIT : here is the updated code thanks to gillesc, as you can see its quite ugly but it works

col1 = 52;
col2 = 53;
gutter = 15;
result = 145;
space = "<br/>";

for (i = 0; i < 6; i++) {
    result += gutter;
    document.getElementById("result").innerHTML += result.toString() + space;
    result += col1;
    document.getElementById("result").innerHTML += result.toString() + space;
    result += gutter;
    document.getElementById("result").innerHTML += result.toString() + space;
    result += gutter;
    document.getElementById("result").innerHTML += result.toString() + space;
    result += col2;
    document.getElementById("result").innerHTML += result.toString() + space;
    result += gutter;
    document.getElementById("result").innerHTML += result.toString() + space;
}

Upvotes: 0

Views: 577

Answers (2)

GillesC
GillesC

Reputation: 10874

Here is a more elegant way. Build up an array and use join() to create your spaced string. Updating innerHTML only once.

+= to append, = to replace. So stop replacing the innerHTML and append to it. += works for number too so result = result + gutter; can simply be result += gutter.

Added var everywhere as well to avoid those variables being on the global scope.

JS Fiddle

var col1 = 52;
var col2 = 53;
var gutter = 15;
var result = 145;
var space = " ";
var html = [];


for (var i = 0; i < 6; i++) {
    html.push(result += gutter);
    html.push(result += col1);
    html.push(result += gutter);
    html.push(result += gutter);
    html.push(result += col2);
    html.push(result += gutter);
}

document.getElementById("result").innerHTML = html.join(space);

Upvotes: 1

Amr Ayman
Amr Ayman

Reputation: 1159

You are reassigning the innerHTML element every time. Stop doing document.getElementById("result").innerHTML = result.toString(); and document.getElementById("result").innerHTML += result.toString();.

Small notes:

  1. The loop runs 7 times not 6.
  2. Run document.getElementById('result'); once before the loop to improve performance.
  3. You don't need to result.toString(), JS is smart enough to convert it when appending to a string.

  4. I would suggest doing:

    const col1 = 52, col2 = 53, gutter = 15, result = 145;
const elem = document.getElementById('result');

for (i = 0; i < 6; ++i) {
    elem.innerHTML += (result += gutter);
    elem.innerHTML += (result += col1);
    elem.innerHTML += (result += gutter);
    elem.innerHTML += (result += gutter);
    elem.innerHTML += (result += col2);
    elem.innerHTML += (result += gutter);
}

Upvotes: 1

Related Questions