I have written a JavaScript file that contains has an onclick method attached to an element in the HTML, but I never selected it in the 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);
};
HTML body
<body>
<div class="sketchpad">
</div>
<input class="submitSizeInput"type="text">
<button id="submitSizeButton" name="clickme" type="submit"> </button>
<script src="index.js"> </script>
</body>
As seen above, submitSizeButton was never defined in the JavaScript, but in my HTML I have a button with an ID set to submitSizeButton. My question is, how come I do not have to use document.querySelector or document.getElementById to bring it to the DOM?
However, if this does not work with other elements such as the input class. How come that does not become a global attribute as well the same as the id does for the button?
Here is a full CodePen: https://codepen.io/fwan0/pen/GRymErp