How to print output of players names using JS & HTML-CodePudding

Hey so I am new to using JS and HTML and still practicing the language, I am trying to print out the user name of both players but without using alert. I want to print the player's names and later going to change it up using CSS but having trouble with the simplest way of printing user inputs I have this so far and was wondering why it is not working, any help will be appreciated.

 function welcome(){
        var first = document.getElementById("FirstName").value; 
        var last = document.getElementById("LastName").value;
        var Print_name = "Welcome "   first  " "  last;
        console.log(Print_name);
     }

<!DOCTYPE html>
<html>
      <head>
        <title>Print Names</title>
      </head>
  <body>
<form method="get">

    <label for="Player1Name">Player 1 Name:</label>
    <input type="text" id="Player1Name" name="player1Name" placeholder="Name"><br>
    <label for="Player2Name">Player 2 Name:</label>
    <input type="text" id="Player2Name" name="player2Name" placeholder="Name"><br>
    <input type="submit" value="Submit" class="btn">


</form>
<script>
     /*javascript code here*/
    
  </script>

  </body>
  
  
  
</html>

CodePudding user response：

You should find an HTML element (with id="Player1Name") and (with id="Player2Name").

Try it code in HTML

<input type="submit" value="Submit" class="btn" onclick="welcome()">

Try it code in JavaScript

 function welcome(){
    var first = document.getElementById("Player1Name").value; 
    var last = document.getElementById("Player2Name").value;
    var Print_name = "Welcome "   first  " "  last;
    alert(Print_name);
 }

CodePudding user response：

your document.getElementById is referencing the wrong Id.

So if you text field is defined as

<input type="text" **id="Player1Name"** name="player1Name" placeholder="Name">

Then what you should be doing is document.getElementById("Player1Name").value

The same goes with the Player2Name field.