Estoy construyendo un teclado virtual con vanillla javascript, pero no sé dónde agregar el detector de eventos onclick a los botones o cómo capturarlos. Tengo una función printKeys que recorre la matriz y las imprime onload, y tengo una función typeKeys inacabada en la que intento obtener el código HTML interno e imprimirlo en el campo de entrada.
HTML
</head> <body onload="printKeys()"> <div class="text"> <input type="text" class="your-text" id="input" placeholder="Your text here.."></input> <button class="copy-btn">Copy</button> </div> <div class="keyboard" id="keyboard"></div> <script src="index.js"></script> </body> </html>JavaScript
const alphaKeys = ["a","b","c"]; const numKeys = "1234567890"; const keyboard = document.getElementById("keyboard"); // render keyboard function printKeys() { for (let i = 0; i < alphaKeys.length; i++) { let keys = document.createElement("button"); keys.innerHTML = alphaKeys[i]; //add onclick function to button keyboard.appendChild(keys); } } //onClick event, add text in text field const input = document.getElementById('input') function typeKeys() { console.log("clicked") //grab input and replace with button innerhtml }En lugar de agregar el controlador de eventos a cada botón, puede aplicarlo al principal (teclado) y luego usar el objetivo del evento para obtener el botón específico. También agregué el carácter a un atributo de datos en lugar del HTML interno.
const alphaKeys = ["a","b","c"]; const numKeys = "1234567890"; const keyboard = document.querySelector(".keyboard"); // render keyboard function printKeys() { for (let i = 0; i < alphaKeys.length; i++) { let keys = document.createElement("button"); keys.innerHTML = alphaKeys[i]; keys.setAttribute("data-character",alphaKeys[i]); keyboard.appendChild(keys); } } //onClick event, add text in text field const input = document.getElementById('input') function typeKeys(character) { input.value += character; } keyboard.addEventListener("click",function(e){ let target = e.target; if(target.getAttribute("data-character")){ typeKeys(target.getAttribute("data-character")) } }); printKeys(); <div class="text"> <input type="text" class="your-text" id="input" placeholder="Your text here.."> <button class="copy-btn">Copy</button> </div> <div class="keyboard" id="keyboard"></div>