使用1个输入字段存储2值
使用1个输入字段存储2值
提问于 2018-11-14 13:06:27
我正在创建我的第一个简单的纸牌游戏，我想创建一个开始菜单，在开始的时候，我们插入播放器1和player2的名字，我可以简单地使用两个不同的输入，但我试图使它更复杂一点，并使用相同的输入字段给两个玩家.我失败了..。当我插入第一个值并将其设置为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>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-11-14 13:10:52
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>
希望这能有所帮助！
Stack Overflow用户
发布于 2018-11-14 13:20:26
//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}`
}你也可以存储像这样的名字。
Stack Overflow用户
发布于 2018-11-14 13:37:32
这是因为Javascript使用对对象的引用。因此，当您将Player1NameInput设置为document.getElementById("playerNameInput").value时，将向变量分配引用；
当您更改document.getElementById("playerNameInput").value时，Player1NameInput的值也会发生变化。尝试使用一个在设置Player1NameInput值时什么也不做的字符串方法，如下所示：
var Player1NameInput = document.getElementById("playerNameInput").value.substring(0);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53300952
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号