자바 루프에서 함수 호출이 작동하지 않습니다.

문제는 웹 페이지가 아무 것도하지 않고 newRow() 함수를 루프하려고 할 때마다 발생합니다. 내가 onload 시도하고 여전히 작동하지 않습니다. 나는 또한 for 루프를 사용했다. 어느 쪽도 일하지 않았다. 표가 여전히 비어 있으며 다른 행을 추가 할 수있는 유일한 방법은 '새 행'버튼을 클릭하는 것입니다. 여기자바 루프에서 함수 호출이 작동하지 않습니다.

는 my-webpage.html입니다 :

이

function newRow() 
{ 

    var table = document.getElementById("GameRating"); 

    var row = table.insertRow(table.rows.length); 

    var title = row.insertCell(0); 
    var genre = row.insertCell(1); 
    var score = row.insertCell(2); 

    title.innerHTML = "<input type=\"text\"></input>"; 
    genre.innerHTML = "<select><option>Platformer</option><option>FPS</option><option>TPS</option></select>"; 
    score.innerHTML = "<input type=\"text\"></input>"; 
} 

function deleteLastRow() 
{ 
    var table = document.getElementById("GameRating"); 

    table.deleteRow(table.rows.length - 1); 
} 

function printHello() 
{ 
    document.write("HELLO!!!<br/>") 
} 

for (i = 0; i < 3; i++) 
{ 
    newRow(); 
}

이

가 왜 작동하지 않습니다

여기

<!doctype html> 

<html> 
    <head> 
     <title> 
      My First Webpage 
     </title> 
    </head> 
    <body> 
    <script type="text/javascript" src="tables.js"> 
    </script> 
    <h2>Game Development Research</h2> 
    <h6>Compiled by Reuben Unicruz</h6> 
     <hr> 
    <h3><u><em>Games Analysis</em></u></h3> 
    <h4>Halo 4</h4> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/HMOWXHlxUM0" frameborder="0" allowfullscreen></iframe> 
    <br/> 
     <hr> 
    <h3><u><em>Game Mechanics</em></u></h3> 
    <h4>First Person Shooters</h4> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/13iMO9s-q0c" frameborder="0" allowfullscreen></iframe> 
    <br/> 
    <h4>Jumping in 2D</h4> 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/yuRRPT-Isp4" frameborder="0" allowfullscreen></iframe> 
     <hr> 
    <h3>Game Ratings</h3> 
    <form> 
     <table id="GameRating"> 
      <thead> 
       <th>Title</th><th>Genre</th><th>Score</th> 
      </thead> 
     </table> 
     <input type="button" value="New Row" onClick="newRow()"></input> 
     <input type="button" value="Delete Last Row" onClick="deleteLastRow()"></input> 
    </form> 
    </body> 
</html>

는 tables.js 파일? 그런데 trincot으로 연결 한 대답은 내 상황과 다르다. 왜냐하면 내가 newRow() 함수를 호출하지 않고 document.write을 대신 사용하면 for 루프가 작동하고 document.write 함수가 작동하기 때문이다. 또한 스크립트가 이미 올바르게 정렬되어 있습니다.

출처

2016-11-18 AlphaD1

뿐만 아니라 HTML 부분의 나머지 부분을 추가하고, 여기 봐주십시오 : [mcve]. –

하지만 루프는 어디에 있습니까? – Teemu

'GameRating' id가있는 요소는 어디에 있습니까? –

이 스 니펫을 확인하십시오. 이것이 당신이 구현하려고 시도한 것입니까?

function newRow() 
 
{ 
 

 
    var table = document.getElementById("GameRating"); 
 
    var row = table.insertRow(0); 
 

 
    var title = row.insertCell(0); 
 
    var genre = row.insertCell(1); 
 
    var score = row.insertCell(2); 
 

 
    title.innerHTML = "<input type=\"text\"></input>"; 
 
    genre.innerHTML = "<select><option>Platformer</option><option>FPS</option><option>TPS</option></select>"; 
 
    score.innerHTML = "<input type=\"text\"></input>"; 
 
}

<head> 
 
     <title> 
 
      My First Webpage 
 
     </title> 
 
    </head> 
 
    <body> 
 
    <script type="text/javascript" src="tables.js"> 
 
    </script> 
 
    <h2>Game Development Research</h2> 
 
    <h6>Compiled by Reuben Unicruz</h6> 
 
     <hr> 
 
    <h3><u><em>Games Analysis</em></u></h3> 
 
    <h4>Halo 4</h4> 
 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/HMOWXHlxUM0" frameborder="0" allowfullscreen></iframe> 
 
    <br/> 
 
     <hr> 
 
    <h3><u><em>Game Mechanics</em></u></h3> 
 
    <h4>First Person Shooters</h4> 
 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/13iMO9s-q0c" frameborder="0" allowfullscreen></iframe> 
 
    <br/> 
 
    <h4>Jumping in 2D</h4> 
 
     <iframe width="560" height="315" src="https://www.youtube.com/embed/yuRRPT-Isp4" frameborder="0" allowfullscreen></iframe> 
 
     <hr> 
 
    <h3>Game Ratings</h3> 
 
    <form> 
 
     <table id="GameRating"> 
 
      <thead> 
 
       <th>Title</th><th>Genre</th><th>Score</th> 
 
      </thead> 
 
     </table> 
 
     <input type="button" value="New Row" onClick="newRow()"></input> 
 
     <input type="button" value="Delete Last Row" onClick="deleteLastRow()"></input> 
 
    </form> 
 
    </body>

출처

2016-11-18 21:20:10

페이지 하단의 표는 변경하지 않습니다. – AlphaD1

@ AlphaD1, 어떤 변화가 필요합니까? 추가 된 요소에는 스타일이 없습니다. 다른 모양을 원하면 Javascript 코드에 클래스, ID 또는 스타일을 추가해야합니다. –

자바 루프에서 함수 호출이 작동하지 않습니다.

답변

관련 문제