Question

我目前正在学习Javascript＆amp; HTML并希望得到一些建议。

我已经使用以下Javascript代码创建了一个非常基本的测验，我想将PlayerName和TotalScore存储在一个动态表中，该表使用localStorage功能，目前我正在使用只需使用我的HTML页面中的Document.write函数存储当前的PlayerName和TotalScore，任何想法，任何人都可以帮忙吗？

我考虑创建一个名为ListOfNames的数组，但不确定如何在下次浏览器打开时不断添加它而不再将变量声明为[]？

var getUsername = false;
var playerName = "string";

playerName = prompt("Please state your player name");
while( getUsername == false)    {
         if (confirm("Are you happy with " + playerName + " ?\n Press OK to proceed 
                                                    OR Cancel to change player name")) {
                                    getUsername = true;
                                     }
        else {
                playerName = prompt("Please provide a valid player name");
                                    }
                                };

alert("  Welcome to my Quiz \n\nPlease answer the following questions as 
accurately as possible \n\nI will then give you a totalscore at the end");

var totalScore = 0;

var question1 = prompt("              Question 1.\n\nWhich country is José 
Mourino from?");
            if (question1 == "Portugal" || question1 =="portugal") {
                totalScore++;
              };
            alert("You Scored " +totalScore + " out of a possible 1");
            alert("Well done");


var listOfPlayers = [];
listOfPlayers.push(playerName);
localStorage.listOfPlayers = listOfPlayers;
console.log(listOfPlayers);

我的HTML目前设置为正确填充CURRENT playerName和得分，我想存储ONGOING结果并在朋友之间不断增长表格等::

  <table class="table">
   <thead>
     <tr>
       <th>Player Name</th>
       <th>Score</th>
     </tr>
   </thead>
   <tbody>
      <tr class="success">
        <td><script> document.write(playerName)</script></td>
        <td><script> document.write(totalScore)</script></td>
     </tr>
     <tr class="success">
       <td>Liam</td>
       <td>11</td>
       </tr>

Answer 1

您不应该使用document.write()，因为这是将内容包含到文档中的一种古老方式，并导致JavaScript必须以正确的顺序编写（正如您已经发现的那样）并且可能导致如果你不小心，可以覆盖文件。

相反，您可以在页面中使用table硬编码的骨架（正如您所做的那样），但使用 API for a table element 动态添加行，细胞和细胞含量根据需要。

以下是一个例子：

＆＃13;

// Place the following code in a <script> element that comes
// just before the closing body tag (</body>)

// Get references to the table and the button.
var btnAdd = document.getElementById("btnAddRow");
var tbl = document.getElementById("tblOutput");

// Set up a click event handling function for the button
btnAdd.addEventListener("click", function(){

  // Set up array for new data. The data can come from anywhere.
  // Here, I'm just hard coding it.
  var data = ["Scott", "999", "42"];

  // Create a new row on the table
  var row = tbl.insertRow();
  
  // Loop through the array to insert the data into the cells of the new row
  // and to store the data in localStorage
  data.forEach(function(value, index){
    // Insert a cell in the row at correct index
    var newCell = row.insertCell(index);

    // Place content from the array in the cell - this can be any data from anywhere
    newCell.textContent = value;  
  });
  
  // Append the array to previously stored data
  localStorage.setItem("playerData", localStorage.getItem("playerData") + data.join(","));
  
});

＆＃13;

/* Just some styling for the table */
table, td, th { border:1px solid black; }
td { padding: 3px; }
tr:nth-child(even){
  background-color:rgba(255, 255, 0, .3);
}

＆＃13;

<table id="tblOutput">
  <thead>
    <th>Name</th>
    <th>ID</th>
    <th>Level</th>
  </thead>
</table>

<button id="btnAddRow">Add New Row</button>

＆＃13;

如何使用localStorage.setItem存储结果并创建一个包含＆＃39; PlayerName＆＃39;和＆＃39; TotalScore＆＃39;

1 个答案: