Hello I am new to coding and I have to do this an assignment for school, I am just a little bit stuck on this part of the assignment. I need to be able to make it that when someone enters their name into the input box the name will then appear on the next page. How would I be able to do that? My code is here if you need or want to look at it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
}
table,
th,
td {
border: 0px solid white;
border-collapse: collapse;
width: 45%;
height: 55px;
text-align: center;
vertical-align: center;
table-layout: fixed;
}
table.center {
margin-left: auto;
margin-right: auto;
}
.Tableheader {
border: 0px solid white
}
.TableCell {
background-color: rgb(252, 142, 215);
border: 2px solid black;
}
.button {
padding: 5px;
background-color: #dcdcdc;
border: 1px solid #666;
color: #000;
margin-top: 10px;
}
button:hover {
color: yellow;
}
.TableCell:hover {
background-color: rgb(255, 230, 0);
}
body {
background-image: url('https://storage.pixteller.com/designs/designs-images/2019-03-27/05/simple-background-backgrounds-passion-simple-1-5c9b95bd34713.png');
}
</style>
</head>
</body>
<div id="MainMenu">
<form name="form1" action="#" onsubmit="required(event)">
<ul>
<h2>Hurkles the Game</h2>
<p>Type in your name and click start to begin</p>
<li><input type='text' name ='text1'/></li>
<li class="rq">*Required Field</li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form>
</div>
<div id="Table">
<h2>Hurkles</h2>
<p> Click a Cell to Find Hurkles</p>
<table>
<table id="tableID" class="center">
<tr>
<td id="R0C0" class="Tableheader"></td>
<td id="R0C1" class="Tableheader">A</td>
<td id="R0C2" class="Tableheader">B</td>
<td id="R0C3" class="Tableheader">C</td>
<td id="R0C4" class="Tableheader">D</td>
<td id="R0C5" class="Tableheader">E</td>
<td id="R0C6" class="Tableheader">F</td>
<td id="R0C7" class="Tableheader">G</td>
<td id="R0C8" class="Tableheader">H</td>
<td id="R0C9" class="Tableheader">I</td>
<td id="R0C10" class="Tableheader">J</td>
</tr>
<tr>
<td id="R1C0" class="Tableheader">1</td>
<td id="R1C1" class="TableCell" onclick="tableText('red')"></td>
<td id="R1C2" class="TableCell" onclick="tableText('red')"></td>
<td id="R1C3" class="TableCell" onclick="tableText('red')"></td>
<td id="R1C4" class="TableCell" onclick="tableText('red')"></td>
<td id="R1C5" class="TableCell" onclick="tableText('red')"></td>
<td id="R1C6" class="TableCell" onclick="tableText('red')"></td>
<td id="R1C7" class="TableCell" onclick="tableText('red')"></td>
<td id="R1C8" class="TableCell" onclick="tableText('red')"></td>
<td id="R1C9" class="TableCell" onclick="tableText('red')"></td>
<td id="R1C10" class="TableCell" onclick="tableText('red')"></td>
</tr>
<tr>
<td id="R2C0" class="Tableheader">2</td>
<td id="R2C1" class="TableCell" onclick="tableText('red')"></td>
<td id="R2C2" class="TableCell" onclick="tableText('red')"></td>
<td id="R2C3" class="TableCell" onclick="tableText('red')"></td>
<td id="R2C4" class="TableCell" onclick="tableText('red')"></td>
<td id="R2C5" class="TableCell" onclick="tableText('red')"></td>
<td id="R2C6" class="TableCell" onclick="tableText('red')"></td>
<td id="R2C7" class="TableCell" onclick="tableText('red')"></td>
<td id="R2C8" class="TableCell" onclick="tableText('red')"></td>
<td id="R2C9" class="TableCell" onclick="tableText('red')"></td>
<td id="R2C10" class="TableCell" onclick="tableText('red')"></td>
</tr>
<tr>
<td id="R3C0" class="Tableheader">3</td>
<td id="R3C1" class="TableCell" onclick="tableText('red')"></td>
<td id="R3C2" class="TableCell" onclick="tableText('red')"></td>
<td id="R3C3" class="TableCell" onclick="tableText('red')"></td>
<td id="R3C4" class="TableCell" onclick="tableText('red')"></td>
<td id="R3C5" class="TableCell" onclick="tableText('red')"></td>
<td id="R3C6" class="TableCell" onclick="tableText('red')"></td>
<td id="R3C7" class="TableCell" onclick="tableText('red')"></td>
<td id="R3C8" class="TableCell" onclick="tableText('red')"></td>
<td id="R3C9" class="TableCell" onclick="tableText('red')"></td>
<td id="R3C10" class="TableCell" onclick="tableText('red')"></td>
</tr>
<tr>
<td id="R4C0" class="Tableheader">4</td>
<td id="R4C1" class="TableCell" onclick="tableText('red')"></td>
<td id="R4C2" class="TableCell" onclick="tableText('red')"></td>
<td id="R4C3" class="TableCell" onclick="tableText('red')"></td>
<td id="R4C4" class="TableCell" onclick="tableText('red')"></td>
<td id="R4C5" class="TableCell" onclick="tableText('red')"></td>
<td id="R4C6" class="TableCell" onclick="tableText('red')"></td>
<td id="R4C7" class="TableCell" onclick="tableText('red')"></td>
<td id="R4C8" class="TableCell" onclick="tableText('red')"></td>
<td id="R4C9" class="TableCell" onclick="tableText('red')"></td>
<td id="R4C10" class="TableCell" onclick="tableText('red')"></td>
</tr>
<tr>
<td id="R5C0" class="Tableheader">5</td>
<td id="R5C1" class="TableCell" onclick="tableText('red')"></td>
<td id="R5C2" class="TableCell" onclick="tableText('red')"></td>
<td id="R5C3" class="TableCell" onclick="tableText('red')"></td>
<td id="R5C4" class="TableCell" onclick="tableText('red')"></td>
<td id="R5C5" class="TableCell" onclick="tableText('red')"></td>
<td id="R5C6" class="TableCell" onclick="tableText('red')"></td>
<td id="R5C7" class="TableCell" onclick="tableText('red')"></td>
<td id="R5C8" class="TableCell" onclick="tableText('red')"></td>
<td id="R5C9" class="TableCell" onclick="tableText('red')"></td>
<td id="R5C10" class="TableCell" onclick="tableText('red')"></td>
</tr>
<tr>
<td id="R6C0" class="Tableheader">6</td>
<td id="R6C1" class="TableCell" onclick="tableText('red')"></td>
<td id="R6C2" class="TableCell" onclick="tableText('red')"></td>
<td id="R6C3" class="TableCell" onclick="tableText('red')"></td>
<td id="R6C4" class="TableCell" onclick="tableText('red')"></td>
<td id="R6C5" class="TableCell" onclick="tableText('red')"></td>
<td id="R6C6" class="TableCell" onclick="tableText('red')"></td>
<td id="R6C7" class="TableCell" onclick="tableText('red')"></td>
<td id="R6C8" class="TableCell" onclick="tableText('red')"></td>
<td id="R6C9" class="TableCell" onclick="tableText('red')"></td>
<td id="R6C10" class="TableCell" onclick="tableText('red')"></td>
</tr>
<tr>
<td id="R7C0" class="Tableheader">7</td>
<td id="R7C1" class="TableCell" onclick="tableText('red')"></td>
<td id="R7C2" class="TableCell" onclick="tableText('red')"></td>
<td id="R7C3" class="TableCell" onclick="tableText('red')"></td>
<td id="R7C4" class="TableCell" onclick="tableText('red')"></td>
<td id="R7C5" class="TableCell" onclick="tableText('red')"></td>
<td id="R7C6" class="TableCell" onclick="tableText('red')"></td>
<td id="R7C7" class="TableCell" onclick="tableText('red')"></td>
<td id="R7C8" class="TableCell" onclick="tableText('red')"></td>
<td id="R7C9" class="TableCell" onclick="tableText('red')"></td>
<td id="R7C10" class="TableCell" onclick="tableText('red')"></td>
</tr>
<tr>
<td id="R8C0" class="Tableheader">8</td>
<td id="R8C1" class="TableCell" onclick="tableText('red')"></td>
<td id="R8C2" class="TableCell" onclick="tableText('red')"></td>
<td id="R8C3" class="TableCell" onclick="tableText('red')"></td>
<td id="R8C4" class="TableCell" onclick="tableText('red')"></td>
<td id="R8C5" class="TableCell" onclick="tableText('red')"></td>
<td id="R8C6" class="TableCell" onclick="tableText('red')"></td>
<td id="R8C7" class="TableCell" onclick="tableText('red')"></td>
<td id="R8C8" class="TableCell" onclick="tableText('red')"></td>
<td id="R8C9" class="TableCell" onclick="tableText('red')"></td>
<td id="R8C10" class="TableCell" onclick="tableText('red')"></td>
</tr>
<tr>
<td id="R9C0" class="Tableheader">9</td>
<td id="R9C1" class="TableCell" onclick="tableText('red')"></td>
<td id="R9C2" class="TableCell" onclick="tableText('red')"></td>
<td id="R9C3" class="TableCell" onclick="tableText('red')"></td>
<td id="R9C4" class="TableCell" onclick="tableText('red')"></td>
<td id="R9C5" class="TableCell" onclick="tableText('red')"></td>
<td id="R9C6" class="TableCell" onclick="tableText('red')"></td>
<td id="R9C7" class="TableCell" onclick="tableText('red')"></td>
<td id="R9C8" class="TableCell" onclick="tableText('red')"></td>
<td id="R9C9" class="TableCell" onclick="tableText('red')"></td>
<td id="R9C10" class="TableCell" onclick="tableText('red')"></td>
</tr>
<tr>
<td id="R10C0" class="Tableheader">10</td>
<td id="R10C1" class="TableCell" onclick="tableText('red')"></td>
<td id="R10C2" class="TableCell" onclick="tableText('red')"></td>
<td id="R10C3" class="TableCell" onclick="tableText('red')"></td>
<td id="R10C4" class="TableCell" onclick="tableText('red')"></td>
<td id="R10C5" class="TableCell" onclick="tableText('red')"></td>
<td id="R10C6" class="TableCell" onclick="tableText('red')"></td>
<td id="R10C7" class="TableCell" onclick="tableText('red')"></td>
<td id="R10C8" class="TableCell" onclick="tableText('red')"></td>
<td id="R10C9" class="TableCell" onclick="tableText('red')"></td>
<td id="R10C10" class="TableCell" onclick="tableText('red')"></td>
</tr>
</table>
<br>
<br>
<button type="button" id="reset" onclick="hideAll()">Start</button>
</div>
<script>
Table.style.display = "none";
MainMenu.style.display = "block";
function Start(){
Table.style.display = "block"
MainMenu.style.display = "none"
}
var input = document.getElementById("text1");
input.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
document.getElementById("submit").click();
}
});
function tableText(col){
if (typeof event!=='undefined')
el=event.srcElement
for (var i = 0; i < el.parentNode.cells.length; i++)
el.parentNode.cells[i].style.backgroundColor=''
el.style.backgroundColor=col
}
let colIndex = Math.floor(Math.random() * 8) + 1;
let rowIndex = Math.floor(Math.random() * 8) + 1;
console.log('col:' + ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'][colIndex-1], 'row:' + rowIndex);
document.querySelector('#R' + rowIndex + 'C' + colIndex).onclick = () => {
tableText('green');
}
function hideAll(){
Table.style.display = "none"
MainMenu.style.display = "block"
}
function gameReset(){
}
function required(e){
e.preventDefault();
var empt = document.forms["form1"]["text1"].value;
if(empt == ""){
alert("Please input your name");
}
else{
Start()
}
}
</script>
</html>
</script>
