Assign variable to innerHTML

Question

First, I am not too verse with JavaScript. I would like to build a HTML table TD elements with content dynamically using JavaScript. Here is my code that is not working properly.

<script type="text/javascript">
function changed(num){
    a1=num;
    a2=num+1;
    a3=num+2;

    for(var i=1;i<=3;i++){
       document.getElementById("boxA"+i).innerHTML=eval('a'+i);
    }
}
</script>

Here is the HTML code:

<input type="text" name="box" onChange="changed(this.value);">

<table width="400" border="10" cellpadding="5">
<tr>
    <td id="boxA1">&nbsp;</td>
    <td id="boxA2">&nbsp;</td>
    <td id="boxA3">&nbsp;</td>
</tr>
</table>

If I entered the value 1 in the input field, the following values should be 1, 2, 3

What error do you get?

Marlo C
– Marlo C

2014-04-14 16:40:30 +00:00
Commented Apr 14, 2014 at 16:40 — Marlo C
– Marlo C, Commented Apr 14, 2014 at 16:40

Jonathan Lonowski · Accepted Answer · 2014-04-14 16:47:01Z

3

The + operator will always perform concatenation when a String is given to it, which the value of an <input> will always be:

console.log('1' + 1);
// '11'

console.log(1 + '1');
// '11'

You'll have to convert the value to a Number to perform addition:

<... onChange="changed(parseFloat(this.value));">

You should also consider using an Array or Object to collect related values, especially those you need to iterate over:

function changed(num){
    var a = {
        1: num,
        2: num + 1,
        3: num + 2
    };

    for(var i=1;i<=3;i++){
       document.getElementById("boxA"+i).innerHTML = a[i];
    }
}

edited Apr 14, 2014 at 16:47

answered Apr 14, 2014 at 16:41

Jonathan Lonowski

124k35 gold badges203 silver badges202 bronze badges

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

1 Comment

Christophe Over a year ago

+1 surprisingly the value of an input of type number is also a string.

erosman · Accepted Answer · 2014-04-14 17:21:36Z

0

Here is a simple approach ....

function changed(n){

  n = parseInt(n); // convert to integer
  if (!n) { return; } // end execution if not found (if not a number)

  for (var i = 1; i <= 3; i++) {

    // Since there is no HTML, textContent is better
    // eval is not needed (people often say eval is evil) ;)
    // using the i to increment
    document.getElementById('boxA' + i).textContent = n + i -1;
  }
}

Good luck :)

answered Apr 14, 2014 at 17:21

erosman

7,8217 gold badges35 silver badges59 bronze badges

Collectives™ on Stack Overflow

Assign variable to innerHTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related