Javascript循環中的函數調用失敗

我遇到的問題是每當我嘗試循環newRow()函數時，我的網頁都無法執行任何操作。我嘗試了onload，但它仍然不起作用。我也用於循環;也沒有工作。該表仍然是空的，我可以添加另一行的唯一方法是單擊「新建行」按鈕。Javascript循環中的函數調用失敗

這裏是my-webpage.html：

<!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文件：

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

爲什麼它不工作？順便說一句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或樣式 –

Javascript循環中的函數調用失敗

回答

相關問題