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

Issue

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:[email protected];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>

Solution

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

Answered By – AndyPipkin

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published