CODEWITHSUNDEEP
javascripthtml
Jakub Klos
Jakub Klos

Reputation: 115

store 2 value using 1 input field

I am creating my first simple card game and I would like to create a start menu where at the begining we insert the names of player 1 and player2, I could simply use 2 different inputs but I tried to make it a little bit more complicated and use the same input field for both players.... and I failed... When I insert the first value and made it a var name1 I am struggoling to set the second one. please check the code, the functions is incomplete but I hope it gives an idea of how I tired to do it.

Thanks for attention.

var dice1, dice2;

   var btnName = document.querySelector(".btn-enterName");
   btnName.addEventListener("click", function() {
     var Player1NameInput = document.getElementById("playerNameInput").value;
     if(Player1NameInput){
       document.getElementById("playerNameInput").value="";
       document.getElementById("playerNameInput").placeholder="PLAYER NAME 2";
     }
     else{
       document.getElementById("playerNameInput").placeholder="please select a Name";
     }
     name1 = Player1NameInput;
   });
  

.playerNameInput {
       width:250px;
       font-size:20px;
       padding:6px;
       text-align: center;
       top:260px;
       left: 50%;
       transform: translateX(-50%);
       position:absolute;
       z-index: 10000;
     }
     .btn-enterName {
       padding:6px;
       text-align: center;
       top:298px;
       left: 50%;
       transform: translateX(-50%);
       position:absolute;
       z-index: 100000;
       background-color:#EB4D4D;
       color:white;
       width:250px;
     }
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="wrapper clearfix">
            <input type="text" id="playerNameInput" class="playerNameInput" placeholder="NAME PLAYER 1">
            <button id="btn-enterName" class="btn-enterName">ENTER</button>
        <script src="app.js"></script>
    </body>
</html>

Upvotes: 0

Views: 227

Answers (3)

FZs
FZs

Reputation: 18619

This is because Javascript uses references to objects. So, when you set Player1NameInput to document.getElementById("playerNameInput").value, a reference will be assigned to variable;
and when you change document.getElementById("playerNameInput").value,Player1NameInput's value will change too. Try to use a string method that does nothing when setting value of Player1NameInput, like this:

 var Player1NameInput = document.getElementById("playerNameInput").value.substring(0);

Upvotes: 0

Parnab Sanyal
Parnab Sanyal

Reputation: 739

    //init
    var players = []
    var maxNumberOfPlayer = 2
    setPlaceHolder(1)


    btnName.addEventListener("click",function(){
        if(players.length == maxNumberOfPlayer ) {
            return
        }
        players.push(document.getElementById("playerNameInput").value)
        setPlaceHolder(players.length)
    })

    function setPlaceHolder(playerNumber) {
        document.getElementById("playerNameInput").placeholder = `PLAYER NAME ${playerNumber}`
    }

You can store names like this also.

Upvotes: 0

fanjabi
fanjabi

Reputation: 1675

var dice1, dice2;

var name1, name2;

var btnName = document.querySelector(".btn-enterName");


btnName.addEventListener("click",function(){
  var PlayerNameInput = document.getElementById("playerNameInput").value; 

  if(PlayerNameInput){
    document.getElementById("playerNameInput").value="";
    document.getElementById("playerNameInput").placeholder="PLAYER NAME 2"
  } else {
    document.getElementById("playerNameInput").placeholder="please select a Name";
  }

  if(!name1) {
    name1 = PlayerNameInput;
  } else {
    name2 = PlayerNameInput;
    console.log({name1,name2});
  }
})
.playerNameInput{
width:250px;
font-size:20px;
padding:6px;
text-align: center;
top:260px;
left: 50%;
transform: translateX(-50%);
position:absolute;
z-index: 10000;
}
.btn-enterName{
padding:6px;
text-align: center;
top:298px;
left: 50%;
transform: translateX(-50%);
position:absolute;
z-index: 100000;
background-color:#EB4D4D;
color:white;
width:250px;
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
        <link type="text/css" rel="stylesheet" href="style.css">
    </head>

    <body>
        <div class="wrapper clearfix">
            
            
            <input type="text" id="playerNameInput" class="playerNameInput" placeholder="NAME PLAYER 1">
         <button id="btn-enterName" class="btn-enterName">ENTER</button>
           
        
        <script src="app.js"></script>
    </body>
</html>

Hope this helps!

Upvotes: 1

Related Questions