Print something from JavaScript to a table in HTML/PHP page

Question

I want to print out the result of a JavaScript function to a table in my HTML/PHP page. I tried using " document.write(player1Name);" but it didn't work. So when i input something into this text field

I want that result to be printed in this table

This is the code in my Hangman Home Page :

   <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>

This is the code in my Multi-player page for the table:

    <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>

This is my JavaScript code I created to do what I want it to do (I think I have done it right):

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

And this is the JavaScript that's being called globally :

var player1Name;
var player2Name;

I hope everyone can understand what I am trying to ask. Please don't hesitate to tell me if there is something wrong with my question. I tried my best to ask the question properly, FYI English isn't my first language

If either of our answers helped, please remember to accept them. Thanks. — Cruiser
– Cruiser, Commented Dec 2, 2015 at 13:58

Cruiser · Accepted Answer · 2015-12-01 17:52:31Z

1

What you want to do is in this html:

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

add an ID to your th elements:

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

Then, in your javascript, possibly in your getPlayerNames function:

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

And then do the same for player2.

edited Dec 1, 2015 at 17:52

answered Dec 1, 2015 at 17:47

Cruiser

1,6162 gold badges16 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nived · Accepted Answer · 2015-12-01 17:50:31Z

1

You can give your <th> tags for the players ids like player1 and player2. Then at the end of your <body> for the Multi-player page you can put a <script> tag that does something like:

<script>
(function() {
  document.getElementById("player1").innerHTML = player1Name;
  document.getElementById("player2").innerHTML = player2Name;
})();
</script>

The document.getElementById grabs the DOM element that you want and then .innerHTML changes what is within that tag. Putting this right before end of the body tag will make sure the html elements are loaded first before trying to access them.

answered Dec 1, 2015 at 17:50

Nived

1,9372 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

Print something from JavaScript to a table in HTML/PHP page

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related