didierCH didierCH - 7 months ago 13
Javascript Question

How to put values from array in td elements

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>




Answer

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

Comments