javascript - 从 JavaScript 打印一些东西到 HTML/PHP 页面中的表格

Question

我想将 JavaScript 函数的结果打印到我的 HTML/PHP 页面中的表格中。我尝试使用“document.write(player1Name);”但它没有用。所以当我在这个文本字段中输入内容时

我希望将结果打印在此表中

这是我的 Hangman 主页中的代码:

   <form id="Player1" class="Player1">
        <input type="text" id="playerOneName"/>
    </form>
    <form id="Player2" class="Player2">
        <input type="text" id="playerTwoName"/>
    </form>
    <button id="Enter" class="Enter" type="button" onclick="navigateToDifficultyForMultiPlayer()">
        <a>Enter</a>
    </button>

这是我的多人游戏页面中表格的代码:

    <TABLE BORDER="5"    WIDTH="20%"   CELLPADDING="5" CELLSPACING="2" id="Score-Board">
  <TR>
      <caption id="table-title">Score Board</caption>
      </TH>
  </TR>
  <TR ALIGN="CENTER">
      <TH colspan="2"> <script> document.write(player1Name);</script> </TH>
      <TH colspan="2"><script> var player2Name </script></TH>
  </TR>
  <TR ALIGN="CENTER">
      <TH colspan="2">score</TH>
      <TH colspan="2">score</TH>
  </TR>
 </TABLE>

这是我创建的 JavaScript 代码，用于执行我希望它执行的操作(我认为我做对了):

function navigateToDifficultyForMultiPlayer() {
    //set player names in session
    setPlayerNames();
    //navigate to DifficultyForMultiPlayer page
    location.href = "DifficultyForMultiPlayer.html";
}

function setPlayerNames() {
    var firstPlayerName = document.getElementById("playerOneName").value;
    var secondPlayerName = document.getElementById("playerTwoName").value;
    console.log(firstPlayerName + " " + secondPlayerName);
    sessionStorage.setItem("Player1Name", firstPlayerName);
    sessionStorage.setItem("Player2Name", secondPlayerName);
}
function getPlayerNames(){
    player1Name = sessionStorage.getItem("Player1Name");
    player2Name = sessionStorage.getItem("Player2Name");
    console.log(player1Name + " " + player2Name);
}

这是全局调用的 JavaScript:

var player1Name;
var player2Name;

希望大家能明白我想问的是什么。如果我的问题有问题，请不要犹豫告诉我。我尽力正确地提出问题，仅供引用，英语不是我的第一语言

Answer 1

你想做的是在这个html中:

<TR ALIGN="CENTER">
  <TH colspan="2"> <script> document.write(player1Name);</script> </TH>
  <TH colspan="2"><script> var player2Name </script></TH>
</TR>

为您的第 th 个元素添加一个 ID:

<TH colspan="2" id="player1"> // and remove the script

然后，在您的 javascript 中，可能在您的 getPlayerNames 函数中:

document.getElementById("player1").text(player1Name);

然后对 player2 做同样的事情。