let body = document.querySelector("body"); let container = document.querySelector("#container"); //Accessing HTML Elements let inputArray = []; for (let element = 0; element < 30; element++) { space = document.createElement("input"); container.appendChild(space); space.setAttribute("id", element); space.classList.add("square"); inputArray.push(space); } //For loop that creates a grid of squares and adds each square to an array document.onkeydown = event => { if (event.keyCode === 37) { for (let i = 0; i < 31; i++) { inputArray[i].value = ""; } } } //When the left arrow key is pressed, the text in every square disappearsNo veo el problema. (Aparte del error Uncaught TypeError: Cannot set properties of undefined (setting 'value') : está usando el bucle i<31 para borrar, pero solo usa i<30 para crear).
Y un pequeño error: no defines la variable de space (recomiendo usar let ).
Si entendí bien tu pregunta?
const container = document.querySelector('#container') const inputArray = Array.from(({length:30}),(e,i)=> { let space = container.appendChild( document.createElement('input') ) space.id = space.placeholder = i space.className = 'square' }) container.onkeydown = evt => { if (evt.key === 'ArrowLeft' && evt.target.matches('input')) { evt.target.value = ''; console.clear() console.log(`element.id = "${ evt.target.id }"`) } } .square { margin : .2em; width : 6em; } <div id="container"></div>