JS - 无法读取 null 的属性值

Question

我正在尝试检查用户是否在 HTML 表单中实时输入了正确的字符串这是 HTML

  <div class="col-md-2">
    <input class="form-control" name="nbequipement" id="nbequipement" placeholder="" type="text">
    <input type="button" value="Creer le tableau" onclick="GenerateTable()" />
  </div>

这是创建 table 的 javascript：

function GenerateTable()
{
    var edValue = document.getElementById("nbequipement");
    var s = edValue.value;
    var table = document.createElement("table");
    table.className = "table table-condensed table-striped table-bordered" ;
    table.id = "table";
    //CREATION DE L'ENTETE
    var tableHeader = table.insertRow(-1);
    var header1 = document.createElement("TH");
    header1.innerHTML = "Nom d'hote";
    //CREATION DE CHAQUE ROW DU TABLEAU
    for (var i = 1 ; i <= s ; i++) {
        //CREATION DE LA LIGNE
        var row = table.insertRow(-1);
        //CREATION DE CHAQUE CELLULES
        var cell1 = row.insertCell(-1);
        cell1.className = "col-md-1";
        cell1.id='container'+ i +'hostname'+ i + '';
        cell1.innerHTML = '<input class="input-sm" id="hostname' + i + '" placeholder="" type="text" onKeyPress="checkHostname('+cell1.id+', hostname'+i+')" onKeyUp="checkHostname('+cell1.id+', hostname'+i+')">' ;
    }

    var body = document.getElementById("tableSpace");
    body.innerHTML = "";
    body.appendChild(table);

可以看到在"cell1"的InnerHTML里有两个监听器：onKeyPress & onKeyDown

当函数 "checkhostname()" 被调用时，我有这个错误：

Uncaught TypeError: Cannot read property 'value' of nullcheckHostname @ template.js:128onkeyup @ templates.php:1

函数如下：

function checkHostname(containerId, elementId) {
    var textContainer = document.getElementById(elementId);
    var texte = textContainer.value;
    //CHECK THE VARIABLE "texte"
    //var lblValue = document.getElementById("lblValue");
}

我不明白为什么会产生这个错误。有人说代码在写之前先执行，但在这种情况下似乎不可能。

Answer 1

您的元素由于某种原因不存在。但是你可以避免错误：

function checkHostname(containerId, elementId) {
    var textContainer = document.getElementById(elementId);
    if(textContainer) {
      var texte = textContainer.value;
    }
}

Answer 2

Cristy 的评论就是您的答案。你在哪里：

cell1.innerHTML = '<input ... onKeyPress="checkHostname('+cell1.id+', hostname'+i+')" ...>' ;

如果 cell1.id 是 "foo" 而 i 是 0，那么它将被视为标记如：

<input ... onKeyPress="checkHostname(foo0, hostname0)" ...>

所以 foo0 和 hostname0 将被视为变量名，而不是字符串。所以你需要用引号将它们括起来，例如

cell1.innerHTML = '<input ... onKeyPress="checkHostname(\''+cell1.id+'\', \'hostname'+i+'\')" ...>' ;

因此它被视为：

<input ... onKeyPress="checkHostname('foo0', 'hostname0')" ...>'

当然，这仍然取决于代码为运行时文档中存在的具有这些 ID（嗯，正确的 ID）的元素。你这么说，应该可以吧。

JS - 无法读取 null 的属性值

JS - cannot read property value of null

html

javascript

getelementbyid

JS - 无法读取 null 的 属性 值

JS - cannot read property value of null

html

javascript

getelementbyid

JS - 无法读取 null 的属性值