JavaScript getElementById null值错误以及如何避免

JavaScript getElementById null values error and how to avoid it

本文关键字：何避免 错误 getElementById null JavaScript      更新时间：2023-09-26

我创建了一个表单，用户可以在其中输入可以添加到页面的最小和最大文本区域数。它生成下面的代码，以便使用JScript:获取它

$minimum .= '<div id="K'.$i.'">'.$min[$i].'</div>';
$maximum .= '<div id="H'.$i.'">'.$max[$i].'</div>';

在JScript中，我定义了一个循环，它将捕获上面的div标记和它们的innerHTML作为数字，并将其放入数组中。

var mincount = [];
var maxcount = [];
for(var k=1; k<101; k++) {
    mincount[k] = parseInt(document.getElementById("K"+k).innerHTML, 10);
    maxcount[k] = parseInt(document.getElementById("H"+k).innerHTML, 10);
}

k被定义为高达100。所以，我知道这就是问题所在，因为如果文本区域少于100个，那么getElementById的值就是null。

因此，它给出了错误：未捕获类型错误：无法读取null的属性"innerHTML"

但必须将其定义为最多100。那么，有没有这样的选择：

if(mincount[k] == null) {mincount[k] = ""} // in order to avoid null values.

这不起作用。它仍然会出现错误。

更简单的解决方案是为这些元素提供相同的类，然后只选择具有该类的所有元素。我看不出为什么每个元素都必须有自己的ID。

$minimum .= '<div class="K">'.$min[$i].'</div>';
$maximum .= '<div class="H">'.$max[$i].'</div>';

然后用JavaScript:

var mincount = [];
var minelements = document.querySelectorAll('.K');
for (var i = 0, l = minelements.length; i < l; i++) {
    mincount.push(parseInt(minelement[i].innerHTML, 10));
    // if the content is purely numeric, unary plus is simpler:
    // mincount.push(+minelement[i].innerHTML);
}

与maxcount相同。

或者，正如@adeneo所建议的，如果您的JavaScript代码也通过PHP提供，并且您可以访问$min数组，那么只需执行

var mincount = <?php echo json_encode($min); ?>;

然后你甚至不知道如何触摸DOM。

测试空值的最简单方法是简单的相等性检查。

...
...
for(var k=1; k<101; k++) {
    var K_el = document.getElementById("K"+k);
    var H_el = document.getElementById("H"+k);
    if ( K_el != null && H_el != null ) {
        mincount[k] = parseInt(K_el.innerHTML, 10);
        maxcount[k] = parseInt(H_el.innerHTML, 10);
    }
}

除非用户可以修改这些值，否则在PHP中计算最小值和最大值会更容易。

首选的解决方案是在给定类型的每个元素上放置一个公共类，并查询实际存在的元素：

$minimum .= '<div class="K" id="K'.$i.'">'.$min[$i].'</div>';
$maximum .= '<div class="H" id="H'.$i.'">'.$max[$i].'</div>';
var mincount = [];
var maxcount = [];
var kItems = document.querySelectorAll(".K");
var hItems = document.querySelectorAll(".H");
for (var i = 0, len = Math.min(kItems.length, hItems.length); i < len; i++) {
    mincount[i] = parseInt(kItems[i].innerHTML, 10);
    maxcount[i] = parseInt(hItems[i].innerHTML, 10);
}

在不更改HTML并保持当前代码方法的情况下，您可以在尝试使用元素之前先检查元素是否存在。：

var mincount = [];
var maxcount = [];
var objK, objH;
for(var k=1; k<101; k++) {
    objK = document.getElementById("K"+k);
    objH = document.getElementById("H"+k);
    if (objK) {
        mincount[k] = parseInt(objK.innerHTML, 10);
    }
    if (objH) {
        maxcount[k] = parseInt(objH.innerHTML, 10);
    }
}

或者，如果你知道一旦一个对象不存在，你就应该跳出for循环，你可以这样做：

var mincount = [];
var maxcount = [];
var objK, objH;
for(var k=1; k<101; k++) {
    objK = document.getElementById("K"+k);
    objH = document.getElementById("H"+k);
    if (!objK || !objH) {
        break;
    }
    mincount[k] = parseInt(objK.innerHTML, 10);
    maxcount[k] = parseInt(objH.innerHTML, 10);
}
相关文章：