Question

我正在创建我的第一个简单的纸牌游戏，我想创建一个开始菜单，在开始时我们插入玩家1和玩家2的名称，我可以简单地使用2个不同的输入，但是我尝试了一下更加复杂，并且为两个玩家使用了相同的输入字段...。我失败了...当我插入第一个值并将其设为var name1时，我正在努力设置第二个值。请检查代码，功能不完整，但我希望它能给我带来一个累的感觉。

感谢关注。

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>

Answer 1

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>

希望这会有所帮助！

Answer 2

APP_NAME

您也可以存储这样的名称。

Answer 3

这是因为Javascript使用对对象的引用。因此，当您将Player1NameInput设置为document.getElementById("playerNameInput").value时，引用将分配给变量；
当您更改document.getElementById("playerNameInput").value时，Player1NameInput的值也会更改。尝试使用在设置Player1NameInput的值时不执行任何操作的字符串方法，如下所示：

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

使用1个输入字段存储2个值

3 个答案: