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. 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
    el 9 jul. 2021 a las 14:40
  • No importa si lo pongo en headers o al final, no puede llamarse "restar"
    – Excorpion
    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. el 4 ago. 2021 a las 13:01
  • A las finales importa si es buena práctica, no ?
    – Excorpion
    el 27 dic. 2021 a las 16:18

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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