How do I use the input from my box to my function?

Question

So I created a 16 x 16 grid where I can etch a sketch on that grid. It's working well. Right now, I have to call the function createGrid(number) everytime I want to change the size of the grid. I have created a text input boxes as you can see on my code. So instead of having to write it again everytime and refresh the page, I want to be able to use the input from this box to change the size of the grid.

One of the ways that I've tried is by creating a new variable such as: let number = inputFromBox.value; and then write createGrid(number) . But it doesn't work. Is there any way how to make this work? by using the input from the box? Please help. Thank you !

 let container = document.querySelector('.container'); let rows = document.getElementsByClassName('gridRow'); let duplicateOfInput = document.getElementById('duplicateOfInput'); let button = document.getElementById('submit'); let inputFromBox = document.getElementsByClassName('size-box'); button.addEventListener('click', createGrid); createGrid(16); draw(); // createGrid(anyNumber); // draw(); // duplicateOfInput.textContent = `${input}`; // const rainbow = document.getElementsByClassName('rainbow'); let reset = document.getElementById('clear-button'); reset.addEventListener('click', clearGrid); function createGrid(number) { makeRow(number); makeColumn(number); draw(); } function makeRow(numberOfRow) { container.innerHTML = ""; for (let i = 0; i <numberOfRow; i++) { let row = document.createElement('div'); container.appendChild(row); row.classList.add('gridRow'); } } function makeColumn(numberOfColumn) { for ( let i = 0; i < rows.length; i++) { for ( let j = 0; j < numberOfColumn; j++) { let column = document.createElement('div'); rows[j].appendChild(column); column.classList.add('gridColumn'); } } } //adds event listener to all divs with class "column" //added in global scope to allow drawing on page load //this refers to the element triggering the mouseover event listener function draw() { let columns = document.getElementsByClassName("gridColumn"); for (let i = 0; i < columns.length; i++) { columns[i].addEventListener("mouseover", changeColor); } function changeColor() { let blue = document.getElementById('blue'); let eraser = document.getElementById('eraser'); let black = document.getElementById('black'); let rainbow = document.getElementById('rainbow'); if (blue.checked) { this.style.backgroundColor = 'blue'; } else if (eraser.checked) { this.style.backgroundColor = 'beige'; } else if (black.checked) { this.style.backgroundColor = 'black'; } else if (rainbow.checked) { let randomColor = Math.floor(Math.random()*16777215).toString(16); this.style.backgroundColor = '#' + randomColor; } } } //eraser function loops through all column divs and sets background to "" in DOM function clearGrid() { let columns = document.getElementsByClassName("gridColumn"); for (let i = 0; i < columns.length; i++) { columns[i].style.backgroundColor = ''; } }

 @import url('https://fonts.googleapis.com/css2?family=Asap:wght@400;600;700&display=swap'); body { display: flex; height: 100%; width: 100%; flex-direction: column; background-color: beige; font-family: Asap, sans-serif; margin: 0; padding: 0; justify-content: center; align-content: center; align-items: center; background-repeat: no-repeat; }.header { display: flex; flex: 1; justify-content: center; } #header-title { font-family: Asap, sans-serif; font-size: 18px; } #setGridSize { display: inline-flex; justify-content: center; align-items: center; flex: 1; gap: 12px; } #guide { text-align: center; margin: 1px; font-family: Asap, sans-serif; color: red; font-size: 13px;; }.canvas { display: flex; justify-content: center; align-items: center; }.container { display: flex; flex-direction: column; border: 1px solid green; width: 550px; height: 550px; } /*.gridColumn { display: inline-flex; border: 1px solid beige; margin: -1px 0; width: 30px; height: 30px; } */.gridColumn { flex: 1; border: 1px solid beige; }.gridRow { display: flex; flex: 1; }.default { background: beige; } #button-container { margin: 3px; } #clear-button { margin: 2px; }

 <,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>DOM Manipulation and Events</title> <script src="javascript.js" defer></script> <link rel="stylesheet" href="styles:css"> </head> <body> <h1 class="header"> Let's sketch ! </h1> <div id="setGridSize"> <p id="header-title"> Grid Size :</p> <input type="text" placeholder="Size of Board" class="size-box"> <span id = "duplicateOfInput"></span> <button id="submit" > Submit </button> </div> <p id="guide"> Enter a number between 2 to 99 </p> <div class="canvas"> <div class="container"></div> </div> <div class="buttons"> <form id="button-container"> <input type="radio" id="blue" name="pen" value="blue-pen"><label for = "blue-pen"> Blue </label> <input type="radio" id="eraser" name="pen" value="eraser"><label for = "eraser" > Eraser </label> <input type="radio" id="black" name="pen" value="black-pen"> <label for = "black" > Black </label> <input type="radio"id="rainbow" name="pen" value="black-pen"> <label for = "rainbow" > Rainbow </label> </form> </div> <button id = "clear-button" > Clear </button> </body> </html>

Answer 1

You can use let inputFromBox = document.getElementById('size-box'); and with let number = inputFromBox.value; you can get the value within the click function.

CodePen

Answer 2

You're using document.getElementsByClassName , which is most likely returning an array. Try using inputFromBox[0].value or switching to finding it by an ID.

Answer 3

You may find it easier to use CSS Grid . It allows you to minimise the amount of code you write because you don't have to create rows and columns separately.

Additionally if you set up some CSS variables you can hook the value from the input directly into the stylesheet to update the dimensions of the grid.

 // Cache the elements const grid = document.querySelector('.grid'); const submit = document.querySelector('.submit'); const input = document.querySelector('.size'); // When the button is clicked call `createGrid` submit.addEventListener('click', createGrid); function createGrid() { // Get the value from the input const { value } = input; // Array to hold the box strings const boxes = []; // Loop to create a grid of boxes - for each // box push it into the array for (let i = 1; i <= value * value; i++) { boxes.push(`<div class="box">${i}</div>`); } // `join` the array and update the innerHTML // of the grid element grid.innerHTML = boxes.join(''); // Pass the value directly into the spreadsheet. // This changes the default `--grid-dimension` to the new value document.documentElement.style.setProperty('--grid-dimension', value); }

 :root { --box-width: 30px; --grid-dimension: 13; }.grid { margin-top: 1em; display: grid; grid-template-columns: repeat(var(--grid-dimension), var(--box-width)); gap: 0.2em; }.box { display: flex; justify-content: center; align-items: center; height: var(--box-width); width: var(--box-width); background-color: lightgreen; }.box:hover { background-color: lightblue; cursor: pointer; }

 <input type="text" placeholder="Size of grid" class="size"> <button type="button" class="submit">Create grid</button> <div class="grid"></div>