innerHTML 在 javaScript 中总是返回“未定义”答案

【问题标题】：innerHTML always returns 'undefine' in javaScriptinnerHTML 在 javaScript 中总是返回“未定义”
【发布时间】：2016-08-11 17:01:31
【问题描述】：

我有一个 HTML 表格，我想做的是在其中找到第二列并将其值放入字符串数组中。

稍后我想做简单的 if 检查并查看我在一个文本框中输入的值是否已经存在于该数组中。但是，当我尝试为文本框获取 .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;
     }
 }

我永远不会进入 if 因为值永远找不到，但是数组中填充了正确的值。有人知道这里有什么问题吗？

【问题讨论】：

我在您的示例中没有看到任何 ID 的表格单元格。
您在 cellValues 数组中推送文本字符串，因此您不应在其上使用 innerHTML

标签： javascript html arrays

【解决方案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;
    }
}

【讨论】：

【解决方案2】：

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>

【讨论】：

【解决方案3】：

您已将文本字符串推送到 cellValues 数组中

cellValues.push(singleCell.innerText);

所以你应该使用

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

检查名称是否已经存在于表中。

【讨论】：

【解决方案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()">

【讨论】：