How to put values from array in td elements

Question

I'm very new to programming, especially to JavaScript and I encounter some problem with putting some values from an array to td elements. I want to grab the nodeValue from td Elements performe some calculation on it and put it back in some other td-elements. The first part works fine, but I didn't get it right to put the values back from the array in other td elements. I always get the warning in the console.:

TypeError: document.getElementById(...).getElementsByTagName(...).item(...) is null

What do I wrong? The relevant code:

        for (i = 0; i <= getPreis.length; i++) {
        priceNumber += 1;
        newElement += 1;
    }

function myFunction() {
    // create array element
    var oldPrice = [];
    // get all td elements in id "originalPrice"
    var getPreis = document.getElementById('originalPrice').getElementsByTagName('td');
    // determine number of td elements
    for (i = 0; i < getPreis.length; i++) {
        oldPrice.push(getPreis[i].childNodes[0].nodeValue);
    }


    // get all td elements in id "listNewPrice"
    var putPreis = document.getElementById('listNewPrice').getElementsByTagName('td');
    // set index of item
    var newElement = 0;
    // set index for array
    var priceNumber = 0;
    // perform operation on array element
    var newPrice = oldPrice[priceNumber] * 0.94;

/* it got problems with this for loop
   here i want to loop through all td elements in tr "listNewPrice" and put the values from the array in there */
    for (i = 0; i <= getPreis.length; i++) {
        priceNumber += 1;
        newElement += 1;
    }

        document.getElementById("listNewPrice").getElementsByTagName('td').item(newElement).innerHTML = newPrice;
}

<!DOCTYPE html>
<html>
<body>

    <table>
    <tbody>
    <tr id="originalPrice">
        <td>22.50</td>
        <td>45.00</td>
        <td>75.00</td>
    </tr>
    <tr id="listNewPrice">
        <td></td>
        <td></td>
        <td></td>
    </tr>
    </tbody>
    </table>

<button onclick="myFunction()">Click me</button>


</body>
</html>

spaceman · Accepted Answer · 2016-05-02 14:36:12Z

2

You need to move the calculation and assignment of the result to the td element inside your loop as you are using incrementing index values that get calculated inside the for loop.

for (i = 0; i < getPreis.length; i++) {
    var newPrice = oldPrice[priceNumber] * 0.94;
    document.getElementById("listNewPrice").getElementsByTagName('td').item(newElement).innerHTML = newPrice;
    priceNumber += 1;
    newElement += 1;
}

In your example newElement === 2 after the for loop then you try and get the item at index 2 of the array of td elements which doesn't exist. Hence the error

document.getElementById(...).getElementsByTagName(...).item(...) is null

Example JSFiddle

edited May 2, 2016 at 14:36

answered May 2, 2016 at 13:53

spaceman

1,1678 silver badges16 bronze badges

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

2 Comments

didierCH Over a year ago

Hey spaceman, thanks a lot for your good explanation. Now it works. Tried hours before...

yezzz Over a year ago

That code is still giving an error. Reason is it loops 4 times instead of 3... use: for (i = 0; i < getPreis.length; i++)

Rion Williams · Accepted Answer · 2016-05-02 14:02:45Z

Since you are going to be reading numeric data out of the original table and performing calculations on it, you'll need to ensure that you are properly parsing the values as numbers instead of strings.

You can do this by using the parseFloat() function when reading in your values :

for (i = 0; i < getPreis.length; i++) {
    // Read in the actual values (so they will be usable in calculations)
    oldPrice.push(parseFloat(getPreis[i].childNodes[0].nodeValue));
}

Then when updating your values, just perform the operation backwards (i.e. iterate through your loop and set the values of each node) :

// determine number of td elements
for (i = 0; i < getPreis.length; i++) {
    putPreis[i].innerHTML = oldPrice[i] * 0.94;
}

Both of these changes will allow you to greatly simplify your existing code :

function myFunction() {
    // create array element
    var oldPrice = [];
    // get all td elements in id "originalPrice"
    var getPreis = document.getElementById('originalPrice').getElementsByTagName('td');
    // determine number of td elements
    for (i = 0; i < getPreis.length; i++) {
        oldPrice.push(parseFloat(getPreis[i].childNodes[0].nodeValue));
    }
    // get all td elements in id "listNewPrice"
    var putPreis = document.getElementById('listNewPrice').getElementsByTagName('td');

    // update your values
    for (i = 0; i < getPreis.length; i++) {
        putPreis[i].innerHTML = oldPrice[i] * 0.94;
    }
}

Example

You can see a working example of this here and demonstrated below :

Hi Rion, thanks a lot for this AWESOME explanation. This helps me a lot for improving my JavaScript-skills.

Collectives™ on Stack Overflow

How to put values from array in td elements

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related