Question

我对编程非常陌生，特别是对JavaScript而言，我遇到了将数组中的某些值放入td元素的问题。我想从td Elements performe获取nodeValue对它进行一些计算并将其放回到其他一些td元素中。第一部分工作正常，但我没有把数值从数组中放回到其他td元素中。我总是在控制台中收到警告：

类型错误： document.getElementById（...）。getElementsByTagName（...）。item（...）是空

我错了什么？相关代码：

        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 1

您需要将结果的计算和赋值移动到循环内的public class ValidateAttribute : ActionFilterAttribute { public overrideTask OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next) { // get current model then if model is not null: // get IService<Model> } }元素，因为您正在使用在for循环内计算的递增索引值。

td

在for循环之后的示例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; }中，您尝试获取不存在的newElement === 2元素数组的索引2处的项目。因此错误

document.getElementById（...）。getElementsByTagName（...）。item（...）为null

Example JSFiddle

Answer 2

由于您要从原始表中读取数字数据并对其执行计算，因此您需要确保正确地将值解析为数字而不是字符串。

您可以在读取值时使用parseFloat()函数执行此操作：

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));
}

然后在更新值时，只需向后执行操作（即迭代循环并设置每个节点的值）：

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

这两项更改都可以让您大大简化现有代码：

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;
    }
}

示例

你可以see a working example of this here并在下面演示：

如何将数组中的值放在td元素中

2 个答案: