innerHTMLは常にJavaScriptで 'undefine'を返します

Question

私はHTMLで1つのテーブルを持っています。私がしようとしているのは、内部の2番目の列を見つけて、値を文字列配列に取得することです。

後で私がチェックして、私が1つのテキストボックスに入力した値がその配列にすでに存在するかどうかを確認したいと思います。しかし、テキストボックスの場合は.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

は、この試す：

あなたは

cellValues.push(singleCell.innerText); 

ですから、名前がすでに存在して持っているかどうかを確認するために

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

を使用する必要がありますcellValues配列内のテキスト文字列をプッシュしている

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

表。

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の値と比較していませんが、innerHTMLの値は<p id="nameVal">で、下の行にあります。

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()">