4

Estoy ayudando a un amigo con los estudios y encontré algo super curioso.

Tiene que hacer una calculadora simple, con requisitos simples en JavaScript.

Ok todo normal, hasta este error...

Ejemplo12.html:19 Uncaught TypeError: restar is not a function
at HTMLInputElement.onclick (Ejemplo12.html:19)

Como se puede ver, dice que la función "restar" no existe, pero está hecha como las demás funciones.

Ahora, si yo le cambio SOLO el nombre a "resta", todo funciona perfectamente.

¿Por que sucede esto?

Código:

function sumar() {
    var n1 = document.getElementById('n1').value;
    var n2 = document.getElementById('n2').value;
    var resultado = parseInt(n1) + parseInt(n2);
    document.getElementById('resultado').value = resultado;

}
function restar() {
    var n1 = document.getElementById('n1').value;
    var n2 = document.getElementById('n2').value;
    var resultado = parseInt(n2) - parseInt(n1);
    document.getElementById('resultado').value = resultado;
}
function multi() {
    var n1 = document.getElementById('n1').value;
    var n2 = document.getElementById('n2').value;
    var resultado = parseInt(n1) * parseInt(n2)
    document.getElementById('resultado').value = resultado;
}
<!-- saved from url=(0097)https://aulas.santotomas.cl/pluginfile.php/23214532/mod_resource/content/0/Ejemplo12.html?embed=1 -->
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Contet-type" content="charset=iso-8859-1">
    <title> Ejemplo de JS Sumas</title>
</head>

<body>
    <p> Suma de Elementos. <br>
    </p>
    <form>
        Numero 1
        <input type="text" id="n1" name="n1" size="4" maxlength="1" value="0"> <br>
        Numero 2
        <input type="text" id="n2" name="n2" size="4" maxlength="1" value="0"> <br>
        <input type="button" id="suma" name="suma" value="+ Sumar" onclick="sumar()">
        <input type="button" id="restar" name="restar" value="- Restar" onclick="restar()">
        <input type="button" id="multiplicar" name="multiplicar" value="* multiplicar" onclick="multi()"><br>
        Resultado:
        <input type="text" id="resultado" name="resultado" size="4" value="0" disabled>
    </form>
</body>

</html>

0

1 respuesta 1

13

El mensaje de error no te está diciendo que restar no existe, sino que no es una función. Es decir, algo llamado resta ha reemplazado a tu definición.

Esto es debido a un comportamiento poco conocido de los navegadores, heredado de Internet Explorer y que por retrocompatibilidad sigue existiendo:

Cuando crear un elemento en el documento, y le pones un atributo id, este atributo para a ser automáticamente un atributo del objeto global (window), que contiene dicho elemento:

console.log(window.myDiv);
<div id="myDiv">Este es mi div</div>

Da la casualidad de que tienes un elemento con id restar, por lo que la función con el mismo nombre ha dejado de estar disponible.

<div id="restar" onclick="restar()">Este es mi div</div>

<script>
console.log(window.restar)
function restar() {
  console.log('una función');
}
</script>

Una forma de solucionarlo sería no usando "onclick", sino añadir los eventos mediante addEventListener. En este caso las funciones no tienen que tener alcance global y puedes definir las funciones y su uso tras la carga del documento:

window.addEventListener('DOMContentLoaded', (event) => {
    console.log('DOM fully loaded and parsed');

    function restar () { ...}
    document.getElementById('restar').addEventListener('click', restar)
});

De esta forma:

  • Las funciones no están en el contexto global, sólo existen dentro de la función anónima donde están declaradas
  • El código se ejecuta tras cargar y procesar todo el documento.
5
  • 2
    Es interesante como se comporta el DOM. Siempre algo que aprender sensei. Commented el 9 jul. 2021 a las 14:38
  • Pablo, como seria eso de ponerlo al final del documento ? Puedes editar el snippet para que se vea como 1 html entero ??
    – Excorpion
    Commented el 9 jul. 2021 a las 14:40
  • No importa si lo pongo en headers o al final, no puede llamarse "restar"
    – Excorpion
    Commented el 9 jul. 2021 a las 15:17
  • 1
    Hola, Pablo. Hice un pequeño experimento y el resultado es que aún se puede utilizar onclick, pero no como atributo. Esto es independientemente de que se considere o no una buena práctica. De igual forma, la respuesta es excelente. +1. Commented el 4 ago. 2021 a las 13:01
  • A las finales importa si es buena práctica, no ?
    – Excorpion
    Commented el 27 dic. 2021 a las 16:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.