Escribí un archivo JavaScript que contiene un método onclick adjunto a un elemento en el HTML, pero nunca lo seleccioné en JavaScript.
window.onload = function() { createSketchpad(0); }; function createSketchpad(size) { const sketchpad = document.querySelector('.sketchpad'); sketchpad.style.gridTemplateColumns = `repeat(${size}, 1fr)`; sketchpad.style.gridTemplateRows = `repeat(${size}, 1fr)`; for(var i = 0; i < Math.pow(size,2); i ++) { var gridIndex = document.createElement('div'); gridIndex.style.backgroundColor = 'blue'; sketchpad.insertAdjacentElement('beforeend', gridIndex); } }; submitSizeButton.onclick = function chooseSketchpadSize() { var submitSizeInput = document.querySelector('.submitSizeInput').value; createSketchpad(submitSizeInput); };cuerpo HTML
<body> <div class="sketchpad"> </div> <input class="submitSizeInput"type="text"> <button id="submitSizeButton" name="clickme" type="submit"> </button> <script src="index.js"> </script> </body>Como se vio anteriormente, el botón de tamaño de envío nunca se definió en JavaScript, pero en mi HTML tengo un botón con una ID configurada para botón de tamaño de envío. Mi pregunta es, ¿cómo es que no tengo que usar document.querySelector o document.getElementById para llevarlo al DOM?
Sin embargo, si esto no funciona con otros elementos como la clase de entrada. ¿Cómo es que eso no se convierte en un atributo global al igual que la identificación para el botón?
Aquí hay un CodePen completo: https://codepen.io/fwan0/pen/GRymErp