En este artículo, analicemos primero el error de referencia y luego pasemos a la función onclick y luego analicemos la pregunta Uncaught ReferenceError en HTMLButtonElement.onclick usando el ejemplo y, por último, lleguemos al enfoque de solución.
Función onclick en javaScript:
- Los controladores de eventos onclick son un grupo de propiedades que ofrecen los elementos DOM para ayudar a administrar cómo reacciona ese elemento a los eventos.
- El ‘objetivo’ representa el elemento en el que se agrega/adjunta el evento.
- El ‘functionRef’ representa el nombre de la función o una expresión de función. La función recibe un argumento de un objeto ‘Evento’.
Sintaxis:
target.on<event> = functionRef;
when does onclick work: El evento click ocurre cuando el usuario hace clic en un elemento. El evento de clic se completa cuando se presiona y suelta el botón del mouse en un solo elemento.
Error de referencia: el error que representa cuando una variable o función no existe en el ámbito actual y se hace referencia a través de una etiqueta de secuencia de comandos en javascript.
Message: Uncaught ReferenceError:something is not defined
Ejemplo 1: veamos el ejemplo cuando ocurre un error de referencia no detectado en HTMLButtonElement.onclick.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="out" onclick="listen(this)">Submit</button>
</body>
<script>
function listen(this) {
this.style.backgroundColor = 'red';
this.innerHTML = "Hii GFG , How r u???"
}
</script>
</html>
Producción:
Aquí surge el error debido a este paso durante la definición de la función, pero dentro de una función, esto se refiere al objeto de la ventana, no a la identificación de ese elemento. entonces crea un problema y regresa como un error en la consola y el programa no da el resultado deseado.
Ejemplo 2: Esta es la solución al problema anterior que surge en javaScript:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="out" onclick="listen(this)">Submit</button>
</body>
<script>
function listen(get) {
console.log(this)
get.style.backgroundColor = 'red';
get.innerHTML = "Hii GFG , How r u???"
}
</script>
</html>
Producción:
Aquí no crea un problema porque pasar cualquier parámetro aleatorio como argumento en la definición de la función no pasa esto como argumento.
Publicación traducida automáticamente
Artículo escrito por surbhikumaridav y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA