Question 190798 in Html Question posted in
Some basic documentation can be found here.

Html – Attempting To getElementById within a form

I am attempting to make an etch sketch game. I am almost complete and have a clear button, a random grid generator button, and an input field to make an NxN grid. I put these 2 buttons and the input field into a single form and the input field no longer works. The clear button and random grid generator still work. I moved them all into the same form to style them with CSS and would like to leave them in the form if possible. I can not figure out why my input field no longer works but everything else does.

<!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">
    <link rel="stylesheet" href="styles.css">
    <script src="JS.js" defer></script>
    <title>Document</title>
</head>

<body>
    <div class="header">
        <h1>Etch A Sketch</h1>
        <form id="inputForm">
           <button id="clear">Clear</button>
           <button id="generator">Random Grid</button>
           <input type="number" id="number" min=1 max=64 placeholder="Enter a # 1-64">
        </form>
    </div>
    <div id="gridContainer">
    </div>
</body>
</html>

//Grabs the form where are of this is housed

var form = document.getElementById("inputForm");
var clearButton = document.getElementById("clear");
var input = document.getElementById("number");

//Starts function that does everything

form.addEventListener("submit", function(e) {

//Prevents browser from refreshing on submit

    e.preventDefault();

input.disabled = true;
var boxInput = input.value;
var gridContainer = document.getElementById("gridContainer");
console.log(boxInput);

for (var i = 0; i <= boxInput * boxInput - 1; i++) {

//Creates a certain number of rows and columns based on user input

    gridContainer.style.gridTemplateColumns =  `repeat(${boxInput}, 1fr)`;
    gridContainer.style.gridTemplateRows =  `repeat(${boxInput}, 1fr)`;
    var div = document.createElement("div");
    console.log(div);
    div.className = "grid";
    gridContainer.appendChild(div);
}
});


//If you click on random grid it will create a grid between 1-64

var randomGrid = document.getElementById('generator')
randomGrid.addEventListener('click', function(){
var randomNumber = Math.floor(Math.random() * (65 - 1) + 1); 
console.log(randomNumber);

for (var i = 0; i <= randomNumber * randomNumber - 1; i++) {

    gridContainer.style.gridTemplateColumns =  `repeat(${randomNumber}, 1fr)`;
    gridContainer.style.gridTemplateRows =  `repeat(${randomNumber}, 1fr)`;
    var div = document.createElement("div");
    console.log(div);
    div.className = "grid";
    gridContainer.appendChild(div);
    input.disabled = true;
}
});

//Makes it blue if you mouseover 

gridContainer.addEventListener('mouseover', function(element) {
    if (element.target.classList.contains('grid')) {
        element.target.style.backgroundColor = 'black';
    }
});

//Clears grid when clicked on

clearButton.addEventListener("click", function(e) {
   e.preventDefault();
   input.disabled = false;
   input.value = '';
   var divs = gridContainer.getElementsByClassName('grid');
   while (divs.length > 0) {
    gridContainer.removeChild(divs[0]);
   }
});
Tags:

2

Answers


  1. 0

    You need to specify type attribute in the button element because it’s inside
    the form element.
    Because type is not specified it’s calling form’s onsubmit method by default.
    The Mozilla Docs says

    formmethod…
    If the button is a submit button (it’s inside/associated with a <form> and doesn’t have type="button"), this attribute specifies the
    HTTP method used to submit the form.

    <button type="button" id="clear">Clear</button>
<button type="button" id="generator">Random Grid</button>
    Login or Signup to reply.
  2. 0

    Actually you don’t need the form, just listen to the input

    input.addEventListener('keydown', function(e) {
  if(e.key === 'Enter') {
    input.disabled = true;
    var boxInput = input.value;
    var gridContainer = document.getElementById("gridContainer");
    console.log(boxInput);

    for (var i = 0; i <= boxInput * boxInput - 1; i++) {
      //Creates a certain number of rows and columns based on user input
      gridContainer.style.gridTemplateColumns =  `repeat(${boxInput}, 1fr)`;
      gridContainer.style.gridTemplateRows =  `repeat(${boxInput}, 1fr)`;
      var div = document.createElement("div");
      console.log(div);
      div.className = "grid";
      gridContainer.appendChild(div);
    }
  }
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search