innerHTML在javaScript中始終返回“ undefine”

Question

我在HTML中有一個表，而我想做的就是在其中找到第二列並將其值放入字符串數組中。

稍后，如果要檢查並查看在一個文本框中輸入的值在該數組中是否已經存在，我想做一個簡單的操作。 但是，當我嘗試為文本框獲取.innerHTML或為數組元素獲取.innerHTML時，我一直都處於“未定義”狀態。 我也嘗試使用.value和.innerText，但是得到的結果相同。

我只能使用普通的javaScript，因此不能使用jQuery或其他庫。 我在這里想念的是什么？

這是我的表格HTML：

<table id="results" width="360" border="1">
    <thead>
      <tr>
        <th scope="col" width="120">Date Created</th>
        <th scope="col" width="120">Name</th>
        <th scope="col" width="120">Tests</th>
      </tr>
    </thead>
    <tbody>
      <tr/>
      <td>07/08/2015</td>
      <td>Test Name</td>
      <td>Raven</td>
      </tr>
      <tr/>
      <td>01/08/2017</td>
      <td>Test Name 2</td>
      <td>PCT</td>
      </tr>
    </tbody>
  </table> 

這是文本框的HTML：

  <form name="formTestInfo" method="post">
    Name:<br>
    <input type="text" id="tbName" name="tbName">
    <p id="nameVal"></p>
  </form>

這是我的腳本代碼：

 var secondCell = document.querySelectorAll('td:nth-child(2)');
 var cellValues = [];
 secondCell.forEach(function(singleCell) {
 cellValues.push(singleCell.innerText);
 });

 for(var i=0; i < cellValues.length ; i++)
 {
     if(document.getElementById("nameVal").innerHTML == cellValues[i].innerHTML)
     {
        var nameVal = "Name already exists in table!";
        validation = false;
     }
 }

如果因為永遠找不到值，而數組卻填充了正確的值，我就永遠不會進入。 有人看到這里有什么問題嗎？

Answer 1

嘗試這個 ：

var secondCell = document.querySelectorAll('td:nth-child(2)');
var cellValues = [];
secondCell.forEach(function(singleCell) {
cellValues.push(singleCell.innerText);
});

for(var i=0; i < cellValues.length ; i++)
{
    if(document.getElementById("tbName").value == cellValues[i])
    {
      var nameVal = "Name already exists in table!";
      validation = false;
    }
}

Answer 2

您已在cellValues數組中推送了文本字符串

cellValues.push(singleCell.innerText);

所以你應該使用

document.getElementById("nameVal").innerHTML == cellValues[i]

檢查表中是否已經存在該名稱。

Answer 3

 var secondCell = document.querySelectorAll('td:nth-child(2)'); var nameInput = document.getElementById('tbName'); var cellValues = []; var validation = true; var error = ""; secondCell.forEach(function(singleCell) { cellValues.push(singleCell.innerText); }); function testNameInput() { for(var i=0; i < cellValues.length ; i++){ if(this.value == cellValues[i]){ error = "Name already exists in table!"; validation = false; break; } } if(error){ alert(error); // this.value = ""; // or something } } nameInput.addEventListener("input", testNameInput); 

 <table id="results" width="360" border="1"> <thead> <tr> <th scope="col" width="120">Date Created</th> <th scope="col" width="120">Name</th> <th scope="col" width="120">Tests</th> </tr> </thead> <tbody> <tr> <td>07/08/2015</td> <td>Foo</td> <td>Raven</td> </tr> <tr> <td>01/08/2017</td> <td>Bar</td> <td>PCT</td> </tr> </tbody> </table> <form name="formTestInfo" method="post"> Name:<br> (Try with Foo or Bar)<br> <input type="text" id="tbName" name="tbName"> <p id="nameVal"></p> </form> 

Answer 4

首先，您正在檢索普通字符串的innerHTML ，它將永遠無法工作。

其次，您不與input值進行比較，而是與下面一行中的<p id="nameVal">的innerHTML進行比較。

if(document.getElementById("nameVal").innerHTML == cellValues[i].innerHTML)

 var secondCell = document.querySelectorAll('td:nth-child(2)'); var cellValues = []; secondCell.forEach(function(singleCell) { cellValues.push(singleCell.innerText); }); function validate(){ for(var i=0; i < cellValues.length ; i++){ if(document.getElementById("tbName").value == cellValues[i]){ document.getElementById("nameVal").innerHTML = "Name already exists in table!"; validation = false; } } } 

 <table id="results" width="360" border="1"> <thead> <tr> <th scope="col" width="120">Date Created</th> <th scope="col" width="120">Name</th> <th scope="col" width="120">Tests</th> </tr> </thead> <tbody> <tr/> <td>07/08/2015</td> <td>Test Name</td> <td>Raven</td> </tr> <tr/> <td>01/08/2017</td> <td>Test Name 2</td> <td>PCT</td> </tr> </thttp://stackoverflow.com/questions/38891283/innerhtml-always-returns-undefine-in-javascript#body> </table> <form name="formTestInfo" method="post"> Name:<br> <input type="text" id="tbName" name="tbName"> <p id="nameVal"></p> </form> <input type="button" value="Validate" onclick="validate()">