Error de referencia no capturado: la función no está definida con onclick

Luego de de una larga compilación de información hemos podido solucionar este apuro que presentan muchos usuarios. Te ofrecemos la solución y nuestro objetivo es serte de mucha ayuda.

Solución:

Nunca usar .onclick(), o similar attributes de un script de usuario! (También es una mala práctica en una página web normal).

La razón es que los scripts de usuario operan en una caja de arena (“mundo aislado”), y onclick opera en el alcance de la página de destino y no puede ver ninguna función que cree su secuencia de comandos.

Siempre usa addEventListener()^Doc (o una función de biblioteca equivalente, como jQuery .on()).

Entonces, en lugar de un código como:

something.outerHTML += ''

Usarías:

something.outerHTML += ''

document.getElementById ("btnsave").addEventListener ("click", resetEmotes, false);

---

Para el bucle, no puede pasar datos a un detector de eventos como ese Consulte el documento. Además cada vez que cambias innerHTML así, ¡destruyes a los oyentes de eventos anteriores!

Sin refactorizar mucho su código, puede pasar datos con datos attributes. Así que usa un código como este:

for (i = 0; i < EmoteURLLines.length; i++) 
    if (checkIMG (EmoteURLLines[i])) 
        localStorage.setItem ("nameEmotes", JSON.stringify (EmoteNameLines));
        localStorage.setItem ("urlEmotes", JSON.stringify (EmoteURLLines));
        localStorage.setItem ("usageEmotes", JSON.stringify (EmoteUsageLines));
        if (i == 0) 
            console.log (resetSlot ());
        
        emoteTab[2].innerHTML  += ''
                                + '





'
                                ;
     else 
        alert ("The maximum emote (" + EmoteNameLines[i] + ") size is (36x36)");
    

//-- Only add events when innerHTML overwrites are done.
var targetSpans = emoteTab[2].querySelectorAll ("span[data-usage]");
for (var J in targetSpans) 
    targetSpans[J].addEventListener ("click", appendEmote, false);

Donde appendEmote es como:

function appendEmote (zEvent) 
    //-- this and the parameter are special in event handlers.  see the linked doc.
    var emoteUsage  = this.getAttribute ("data-usage");
    shoutdata.value += emoteUsage;

ADVERTENCIAS:

• Su código reutiliza la misma identificación para varios elementos. No hagas esto, no es válido. Una identificación dada debe ocurrir solo una vez por página.
• Cada vez que usas .outerHTML o .innerHTML, desecha cualquier controlador de eventos en los nodos afectados. Si usa este método, tenga cuidado con ese hecho.

Estaba recibiendo el error (estoy usando Vue) y cambié mi onclick="someFunction()" a @click="someFunction" y ahora están trabajando.

Reseñas y calificaciones del tutorial

Si te ha resultado de ayuda nuestro artículo, te agradeceríamos que lo compartas con el resto juniors así nos ayudas a difundir nuestro contenido.

---

---

Utiliza Nuestro Buscador