2016-11-18 16 views
0

私が抱えている問題は、newRow()関数をループするときにいつでも私のWebページは何もしません。私はonloadを試みたが、それはまだ動作しません。私もループのために使った。どちらもうまくいきませんでした。テーブルはまだ空です。別の行を追加できる唯一の方法は、「新しい行」ボタンをクリックすることです。ここでJavascriptループの関数呼び出しが機能しない

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ファイルはありますか? ところで、私がnewRow()関数を呼び出さずにdocument.writeを使用した場合、forループが機能し、document.write関数が機能するので、リンクされた答えは私の状況とは異なります。また、スクリプトはすでに適切に配置されています。

+2

だけでなくHTML部分の残りの部分を追加し、こちらをご覧ください:[MCVE]。 –

+1

しかし、ループはどこにありますか? – Teemu

+1

あなたの要素は 'GameRating' idですか? –

答えて

0

このスニペットを確認してください。これはあなたが実装しようとしていたものですか?

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>

+0

ページの下部にある表を変更しません。 – AlphaD1

+0

@ AlphaD1、どのような変更が必要ですか?追加された要素にはスタイルがありません。他の外観を持たせたい場合は、Javascriptコードでクラス、ID、またはスタイルを追加する必要があります –

関連する問題