0

I'm very new to JavaScript and I wish I could set the value of a td tag using JavaScript.

I have code like this to do so:

window.onload = function() {
     document.getElementById("units").value = "122"
}

And I have a html file like this:

<table class="table" width="100%">
    <caption class="bold">TNEB UnitCalculator</caption>
    <tbody>
        <tr>
            <td>testing</td>
            <td id="units"></td>
        </tr>
    </tbody>
</table>

But that doesn't seems to be working!

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
sriram
  • 8,562
  • 19
  • 63
  • 82

3 Answers3

5

The td tag doesn't have a value attribute:

document.getElementById("units").appendChild(document.createTextNode(122));

Or if you want to set some attribute:

document.getElementById("units").setAttribute('data-value', 122);
PeeHaa
  • 71,436
  • 58
  • 190
  • 262
0

The td element does not have a value attribute. Use innerHTML instead.

marekful
  • 14,986
  • 6
  • 37
  • 59
  • 1
    Didn't down vote, but `innerHTML` is the worst thing you can do in this situation. – PeeHaa Feb 22 '13 at 11:45
  • Why is it? Using createTextNode is really only necessary in a few cases. For example, when you have a in an element and want to append text not in any tag after that – marekful Feb 22 '13 at 11:46
  • Not my -1, but I imagine it's because you're using `innerHTML` instead of DOM. Not that that's a valid reason to downvote imo, it works just fine. (although it might not be the best option) – Cerbrus Feb 22 '13 at 11:46
  • http://stackoverflow.com/questions/7476638/if-people-recommend-i-shouldnt-use-innerhtml-what-then-should-i-instead-use explains a lot more in detail – ed_me Feb 22 '13 at 11:47
  • Getting or setting the content of a with `innerHTML` is perfectly valid and has the desired result. – marekful Feb 22 '13 at 11:48
  • @MarcellFülöp `innerHTML` destroys the possible DOM elements as well as is slower. – PeeHaa Feb 22 '13 at 11:48
  • @Cerbrus How `innerHTML` is _not_ part of the DOM?? – marekful Feb 22 '13 at 11:49
  • @PeeHaa Yes it does _replace_ all elements but as long as this is your goal, it's perfectly OK. – marekful Feb 22 '13 at 11:49
  • @MarcellFülöp If you want to replace all elements in it you should still not use it. Because looping through the elements and removing them using DOM is waaay faster. There is a (limited) use case for `innerHTML`, but this just isn't it. – PeeHaa Feb 22 '13 at 11:51
  • @MarcellFülöp: _"DOM - Document Object Model"_. There's nothing "Object-oriented" about `innerHTML`, it just uses a string. That's the problem with it. The browser has to re-parse the entire page if you use `innerHTML`, because the browser has no way of knowing what your object structure is, after inserting a string at a random position in your document. – Cerbrus Feb 22 '13 at 11:52
  • I don't agree. Suppose you have a large number of DOM elements. Iterating through them and individually removing is more expensive and slower than doing it in one expression using `innerHTML`. – marekful Feb 22 '13 at 11:53
  • @MarcellFülöp: in that case, you could just remove and re-build the parent, possibly. Also, do you have any sources to back-up your claim that removing all children from an element is slower than setting it's `innerHTML`? **[Here's a JSperf I found](http://jsperf.com/empty-content-innerhtml-vs-dom/2)** about this. For 1000 child elements, DOM manipulation is between about 8 and 80 times as fast. – Cerbrus Feb 22 '13 at 11:55
  • @MarcellFülöp You can disagree. But that is a moot point until you have tested it and came to the comclusion your statement is wrong. – PeeHaa Feb 22 '13 at 11:56
  • @PeeHaa I doubt you are right in the performance difference. I'll pull up a quick test. – marekful Feb 22 '13 at 11:59
  • @PeeHaa Please see yourself: http://jsfiddle.net/QXuxL/ `innerHTML` ~ 10ms vs. iterating and removing elements ~100+ms. So how is it more efficient or fast if one does _not_ user the `innerHTML`? Interestingly, a very similar test to the one you linked yields different results. I'm open to any explanations. – marekful Feb 22 '13 at 12:27
  • @MarcellFülöp: I [took the liberty to edit your fiddle](http://jsfiddle.net/QXuxL/9/). I added a load more TD's, and modified your DOM function, it was very inefficient. Now, the `innerHTML` is only 3,5 times as fast for that many elements, compared to 10 times. The larger the sample data gets, the more DOM manipulation gains on innerHTML, untill ut's utterly smashed by DOM, as seen in @PeeHaa's example. – Cerbrus Feb 22 '13 at 12:42
  • You are welcome! But is the `innerHTML` way still not the fastest? – marekful Feb 22 '13 at 12:45
0

Actually your code is working correctly

<script>
    window.onload = function() {
        document.getElementById("units").value = "122"
    }
</script>

<table class="table" width="100%">
    <caption class="bold">TNEB UnitCalculator</caption>
    <tbody>
        <tr>
            <td>testing</td>
            <td id="units"></td>
        </tr>
    </tbody>
</table>

You can check this in your browsers developer tools. In the command line, type:

document.getElementById("units").value
Cerbrus
  • 70,800
  • 18
  • 132
  • 147
sundar nataraj
  • 8,524
  • 2
  • 34
  • 46