Actualmente aprendiendo javascript y tenía curiosidad acerca de esta posibilidad. Tengo este código dentro de un archivo .JS
var x = document.createElement("IMG"); x.setAttribute("src", "helpimage.png"); x.setAttribute("width", "20"); x.setAttribute("height", "20"); x.setAttribute("alt", "help image"); x.setAttribute("id","image"); var row = document.createElement('div'); row.classList.add('row'); var label = document.createElement('div'); label.id = machineName + '-label'; label.classList.add('col-md-5'); label.innerHTML = humanName + ':'; label.appendChild(x); label.onclick = function() {myFunction()}; row.appendChild(label);y esta función titulada "MyFunction"
function myFunction() { document.getElementById(machineName + '-label').innerHTML = "YOU CLICKED ME!"; }Lo que hace este código es que primero se llama a una función que crea un elemento de formulario simple con una etiqueta. Adjunto una imagen con la etiqueta "x" en la etiqueta. Me gustaría poder hacer clic en esa etiqueta, con un evento onclick, y luego cambiarlo a lo que quiera. (solo probando aquí)
Entonces, una vez que mi primera función genera mi formulario, quiero hacer clic en mi etiqueta y hacer que cambie a "USTED ME HA HECHO CLIC".
Excepto cuando hago clic en la imagen, no pasa nada.
¿Alguien puede decirme qué estoy haciendo mal?
Coloque el texto que desea reemplazar en otro elemento anidado, en lugar del elemento que también contiene la imagen.
var x = document.createElement("IMG"); x.setAttribute("src", "helpimage.png"); x.setAttribute("width", "20"); x.setAttribute("height", "20"); x.setAttribute("alt", "help image"); x.setAttribute("id", "image"); var row = document.createElement('div'); row.classList.add('row'); var label = document.createElement('div'); let machineName = "filename"; label.id = machineName + '-label'; label.classList.add('col-md-5'); let humanName = "File Name"; let text = document.createElement("span"); text.id = machineName + "-text"; text.innerHTML = humanName + ':'; label.appendChild(text); label.appendChild(x); label.onclick = function() { myFunction() }; row.appendChild(label); document.body.appendChild(row); function myFunction() { document.getElementById(machineName + '-text').innerHTML = "YOU CLICKED ME!"; }