gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 00:44:37 25 4
gpt4 key购买 nike

我正在创建我的第一个简单的纸牌游戏,我想创建一个开始菜单,在开始时我们插入玩家 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>

最佳答案

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>

希望这有帮助!

关于javascript - 使用 1 个输入字段存储 2 个值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53300952/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com