let classMessage = document.createElement('class'); document.getElementById("chat").prepend(classMessage); classMessage.id = tabMsg[0]; classMessage.innerHTML += '<button onclick="del(' + tabMsg[0] + ')">Try it</button>' function del(parsedata) { console.log(parsedata) }tabMsg es una línea analizada (con división).
No entiendo por qué cuando hago clic en el botón, la salida en la consola es:
<class id="vuwzbip6dr"><button onclick="del(vuwzbip6dr)">Try it</button><p>gfdgf gdfgf</p></class>por que no pone el id vuwzbip6dr!!! ?
Encapsular cadenas con cadenas dentro de cadenas generalmente causa más problemas de los que resuelve y, por lo tanto, debe evitarse.
En su caso, eso significa esta declaración:
'<button onclick="del(' + tabMsg[0] + ')">Try it</button>' te está causando el problema.
Esa línea se interpreta como:
<button onclick="del(v)">Try it</button>
Donde v se convierte en un identificador que apunta a this , o al elemento currentTarget y no a una cadena como esta: "dev('v')".
Mirando la documentación, uno ve que el controlador onclick proporciona el currentTarget como el primer argumento para la devolución de llamada, de ahí la asignación que menciono.
Para solucionar esto, debe confiar en las herramientas que proporciona JavaScript, es decir, le proporciona el objetivo currentTarget (elemento de destino del clic), por lo que todo lo que tiene que hacer es usarlo y solicitar el atributo de identificación del elemento principal:
classMessage.innerHTML += '<button onclick=del(this)>Try it</button>' function del(target) { console.log(target.parentNode.id) }Pero eso tampoco es recomendable. Siempre debe intentar evitar el uso de controladores de eventos en línea. Dejaré eso a una pregunta diferente para ti.