innerHTML总是返回'undefine'在javaScript

innerHTML always returns 'undefine' in javaScript

本文关键字：javaScript undefine innerHTML 返回      更新时间：2023-09-26

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

我从来没有进入如果，因为值从来没有找到，但数组被填入正确的值。有人知道这里有什么问题吗?

try this:

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


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>

您已将文本字符串推入cellValues数组

cellValues.push(singleCell.innerText);
所以你应该使用 
document.getElementById("nameVal").innerHTML == cellValues[i]
检查名称是否已经在表中存在。

首先，您正在检索正常字符串的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()">

相关文章：