我正在尝试添加用户的名字在井字游戏我正在工作，我正在使用表单，当我按提交球员的名字不显示在球员1和球员2？ 我可以不用表格吗？ 此外，我如何删除名称从两个字段一旦用户点击清除。 明码不起作用吗？ 我现在就把它评论掉了。 我试过几次，但都没有奏效。 供你参考，我还在学习，所以请不要太苛刻。
HTML
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="tictactoe.css">
</head>
<body>
<h1><center>Tic Tac Toe</center></h1>
<script src="tictactoe.js"> </script>
<h3>Enter Player's Name</h3>
<h2>First Player is the X, Second player is the O</h2>
<form action="players">
<label for="p1name">Player One First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="p2name">Player Two First name:</label>
<input type="text" id="fname2" name="fname2"><br><br>
</form>
<button onclick="players()">Submit</button>
<button onclick="Clear()">Clear</button>
<h4>Player One, (X) </h4><p id="demo"></p>
<h4>Player Two, (O) </h4><p id="demo2"></p>
<script>
function myFunction() {
var x = document.getElementById("p1name").value;
var y = document.getElementById("p2name").value;
document.getElementById("demo").innerHTML = x;
document.getElementById("demo2").innerHTML = y;
}
// function Clear() {
// var elements = [] ;
// elements = document.getElementsByClassName("myText");
// for(var i=0; i<elements.length ; i++){
// elements[i].value = "" ;
// }
// }
function Clear(){
document.getElementsById("myText").value = '';
}
</script>
<div class="selectTokens">
<h1>X</h1>
<h1>O</h1>
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
CSS
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196f3;
padding: 30px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 50px;
}
您在以下方面存在问题:
>
myFunction（）应该是:players（），因为这是您在点击处理程序中用来触发它的名称
输入ID p1name，p2name（HTML中不存在）应为:fname，fname2（输入ID中使用的）
document.getElementsById（“MyText”）。value=“； GetElementsById宽度s不存在
相反，使用单独选择每个输入，并将其值设置为“”
document.getElementsById（“fName”）。value=“；
document.GetElementsById（“FName2”）。value=“；
请尝试以下代码:
null
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196f3;
padding: 30px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 50px;
}<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="tictactoe.css">
</head>
<body>
<h1><center>Tic Tac Toe</center></h1>
<script src="tictactoe.js"> </script>
<h3>Enter Player's Name</h3>
<h2>First Player is the X, Second player is the O</h2>
<form action="players">
<label for="p1name">Player One First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="p2name">Player Two First name:</label>
<input type="text" id="fname2" name="fname2"><br><br>
</form>
<button onclick="players()">Submit</button>
<button onclick="Clear()">Clear</button>
<h4>Player One, (X) </h4><p id="demo"></p>
<h4>Player Two, (O) </h4><p id="demo2"></p>
<script>
function players() {
var x = document.getElementById("fname").value;
var y = document.getElementById("fname2").value;
document.getElementById("demo").innerHTML = x;
document.getElementById("demo2").innerHTML = y;
}
// function Clear() {
// var elements = [] ;
// elements = document.getElementsByClassName("myText");
// for(var i=0; i<elements.length ; i++){
// elements[i].value = "" ;
// }
// }
function Clear(){
document.getElementById("fname").value = "";
document.getElementById("fname2").value = "";
}
</script>
<div class="selectTokens">
<h1>X</h1>
<h1>O</h1>
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
试试这个
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>
<center>Tic Tac Toe</center>
</h1>
<h3>Enter Player's Name</h3>
<h2>First Player is the X, Second player is the O</h2>
<div>
<label for="p1name">Player One First name:</label>
<input type="text" id="p1name" name="fname"><br><br>
<label for="p2name">Player Two First name:</label>
<input type="text" id="p2name" name="fname2"><br><br>
</div>
<button type="button" onclick="initPlayers()">Submit</button>
<button type="" onclick="Clear()">Clear</button>
<h4>Player One, (X) </h4>
<p id="demo"></p>
<h4>Player Two, (O) </h4>
<p id="demo2"></p>
<script>
function initPlayers() {
var player_1 = document.getElementById("p1name").value;
var Player_2 = document.getElementById("p2name").value;
document.getElementById("demo").innerHTML = player_1;
document.getElementById("demo2").innerHTML = Player_2;
var player_1 = document.getElementById("p1name").value = '';
var Player_2 = document.getElementById("p2name").value = '';
}
function Clear() {
document.getElementById("demo").innerHTML = '';
document.getElementById("demo2").innerHTML = '';
}
</script>
<div class="selectTokens">
<h1>X</h1>
<h1>O</h1>
<div class="grid-container">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
