3

Buenos días, acabo de iniciarme en JavaScript hace unos días, y tengo un problema con el siguiente código:

<script>
        function mostraralerta() {
            alert("hizo clic!");
        }
        function hacerclic() {
            document.getElementById("boton").onClick = mostraralerta();
        }
        window.onload=hacerclic();
    </script>
</head>
<body>
    <div id="principal">
        <input type="button" id="boton" value="Haz click">
        <p>No puede hacer Clic</p>
    </div>

He probado igualmente con

document.querySelector("#boton").onClick = mostraralerta();

pero obtengo el mismo resultado. Entiendo que se trate de un error de bulto, pero no doy con él, a ver si podéis iluminarme.

Tras la ayuda recibida el código actualmente está así:

<!DOCTYPE HTML>
<html>
    <head>
        <script>
        function mostraralerta() {
            alert("hizo clic!");
        }
        function hacerclic() {
            document.getElementById("boton").onClick = function(){
            mostraralerta();
            };
        }
        window.onLoad=hacerclic();
        </script>
    </head>
    <body>
        <input type="button" id="boton" value="Haz click">
    </body>
</html>

Un saludo.

3
  • el id es "boton" no "button". En el codigo lo tienes mal, en el querySelector no. Ademas, te sale un error en consola diciendo que no puedes poner el evento onclick en null por no encontrarlo
    – lois6b
    el 18 may. 2017 a las 8:54
  • Perdona es correcto, he estado probando también con getElementsByTagName y al final no cambié eso. La única forma en la que consigo que funcione es poniendo el evento onClick directamente en el input, pero me gustaría hacerlo funcionar con las funciones.
    – Stephan
    el 18 may. 2017 a las 9:04
  • recuerda que el ID es unico y por eso puedes hacer getElementById y asignar lo que sea, pero con getElementsBy.... devuelve todos los que encuentre (habiendo solo uno debes acceder a la posicion [0])
    – lois6b
    el 18 may. 2017 a las 9:06

2 respuestas 2

13

Aquí tienes tu código funcionando correctamente. Al final te explico los problemas que sufrías y cómo corregirlos:

function mostraralerta() {
  alert("hizo clic!");
}
function hacerclic() {
  document.getElementById("boton").onclick = mostraralerta;
}
window.onload = hacerclic;
<!DOCTYPE HTML>
<html>
    <head>
        <script>
        </script>
    </head>
    <body>
        <input type="button" id="boton" value="Haz click">
    </body>
</html>

Para empezar he cambiado:

window.onLoad=hacerclic();

Por:

window.onload = hacerclic;

La propiedad window.onLoad no existe, la correcta es window.onload.

Recuerda que javascript, al igual que C, PHP, Java, etc es sensible a las mayúsculas y minúsculas, pero al no ser un lenguaje de tipado estricto no es capaz de decirte que esa propiedad no existe, se crea dinámicamente (aunque no tenga ningún resultado práctico).

El parámetro que espera es una función. Tú le estás entregando el resultado de llamar a una función que no devuelve nada (undefined).

También he cambiado:

document.getElementById("boton").onClick = function(){
  mostraralerta();
};

Por:

document.getElementById("boton").onclick = mostraralerta;

De nuevo estás usando onClick en vez de onclick.

Además, de nuevo requiere una función, por lo que he eliminado la necesidad que has tenido de de crear una función que llamará a tu función. Basta con indicar tu función.

RESUMEN: Recuerda que se requiere asignar una función que será llamada como respuesta al evento. Basta con poner su nombre si ésta ya existe. Si la llamamos (agregando ()) entonces lo que se tratará de asignar al evento es el resultado de la llamada a dicha función, y no la función en sí misma.

2
  • 1
    Finalmente una respuesta acertada... Pero hubiese esperado el uso de addEventListener en cambio.
    – Mariano
    el 19 may. 2017 a las 10:21
  • Nada como recordar que a partir del DOM nivel 2 está disponible (y recomendada) esa opción :) Pero si se lía con lo más básico más vale no liarle con cosas más complejas (por ahora). Como siempre, gracias por comentar ;) el 19 may. 2017 a las 10:23
1

El problema es la llamada a la función mostraralerta. Debes hacerla dentro de una función anónima:

function mostraralerta() {
      alert("hizo clic!");
  }
  function hacerclic() {
      document.getElementById("boton").onclick = function(){
        mostraralerta();
      };
  }
  window.onload = function() {
    hacerclic();
  }
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <input type="button" id="boton" value="Haz click">
  </body>

</html>

EDIT

Tras ver y probar la respuesta de OscarGarcia, puedes realizar la llamada a la función hacerclick, desde una función anónima o directamente:

<script>
      function mostraralerta() {
           alert("hizo clic!");
      }
      function hacerclic() {
         document.getElementById("boton").onclick = function() {
             mostraralerta();
         }
      }

      window.onload=hacerclic;

 </script>

El problema venía, no tanto de la manera de llamar a la función, si no del momento de ejecución de la misma. En el código de la pregunta, el evento onload declarado:

window.onload = hacerclick();

Lo que hace es ejecutar esa función en el momento de carga del script, cuando todavía el elemento no existe. Metiendo esa llamada en una función anónima o estableciendo solamente el nombre de la función como señala OscarGarcia, evitas esa ejecución en la carga y la asocias al evento onload.

Con cualquiera de estas dos aproximaciones, puedes colocar tu script en el head, que es lo recomendado.

3
  • Veo que el código aquí funciona, sin embargo aún haciendo un copy/paste ya no se ejecuta automáticamente al abrirla pero tampoco al hacer click en el botón. La única diferencia es que tengo el script en el head de forma directa en vez de en fichero extero, pero dudo que eso afecte. Lo he editado en la primera.
    – Stephan
    el 18 may. 2017 a las 10:16
  • @Stephan tienes razón, aquí funciona porque el script se carga después del DOM, pero no es el caso de tu ejemplo, edito mi respuesta. El elemento onload debe ser una función.
    – user17875
    el 19 may. 2017 a las 6:48
  • @Stephan he editado mi respuesta para añadir un par de consideraciones extra basadas en la respuesta de OscarGarcia
    – user17875
    el 19 may. 2017 a las 9: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.