1

I'm new to coding and am trying to make a game for school, when i submit my name into a text box it is supposed to proceed to the next page but it only flashes for a split second and was wondering why it does that? There is also some other error saying the 'addeventlistner' is wrong or something, though it was working fine before i put the alert message in. The code is in javascript.

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("myBtn").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() {
  var empt = document.forms["form1"]["text1"].value;
  if (empt == "") {
    alert("Please input your name");
  }
  else {
    Start()
  }
}
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');
}
<div id="MainMenu">
    <form name="form1" action="#" onsubmit="required()">
        <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>
</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>
pilchard
  • 12,414
  • 5
  • 11
  • 23
Sceptional
  • 19
  • 3
  • your code produces an error `TypeError: can't access property "addEventListener", input is null` – Bravo May 14 '22 at 08:22
  • Your input doesn't have an id `` thus the `addEventListener` error. – pilchard May 14 '22 at 09:14
  • And your page is just redirecting after `submit` which is the default behaviour. You'll need to `event.preventDefault()`. So pass the event from the onsubmit `onsubmit="required(event)"` and then in `required` accept the event and prevent default. `function required(e) { e.preventDefault(); var empt = document.forms["form1"]["text1"] ...` – pilchard May 14 '22 at 09:23
  • You also need to close your `
    `
    – pilchard May 14 '22 at 09:25
  • Does this answer your question? [Don't redirect on submitting form](https://stackoverflow.com/questions/50378564/dont-redirect-on-submitting-form) – pilchard May 14 '22 at 09:29

0 Answers0