2

Me encuentro en el proceso de aprendizaje de Javascript, desde un nivel muy básico y trato de aprender algunas cosas. Estoy practicando con esta fórmula:

        <!DOCTYPE html>
<html>
<body>

<p id="demo" onclick="myFunction()">Click me to change my HTML content (innerHTML).</p>
<p id="other" onclick="myFunction()">CHANGE IT!.</p>

<script>
function myFunction() {
  document.getElementById("demo").innerHTML = "Paragraph changed!";
}

function myFunction() {
  document.getElementById("other").innerHTML = "HELLO!";
}
</script>

Estoy probando y de alguna manera, por más que cambie el orden en el que aparecen ambos elementos con function, solo el segundo parece tener efecto en cuanto a cambiar el texto en el que aparece dentro de la función. Es acaso por efecto cascada o algo más?

2
  • 5
    No puedes tener más de una función con el mismo nombre. En este caso lo que esta pasando es que la segunda sobrescribe a la primera y por ello el resultado "HELLO!". Saludos! el 15 sep. 2019 a las 2:34
  • Puedes declarar la misma función 2 o mas veces, y de hecho se usa en ocasiones deliberadamente, la única forma de no poder hacerlo es declararla como constante const myFunction = function(){ //contenido }
    – Emeeus
    el 16 sep. 2019 a las 12:07

1 respuesta 1

1

El código se lee de manera secuencial, entonces ocurre lo siguiente:

  • Empieza la lectura del mismo y encuentra un párrafo con id demo que invoca a una función myFunction cuya finalidad es modificar el valor del párrafo
  • Sigue avanzando y encuentra un párrafo con id other que invoca a la misma función para modificar el texto del párrafo.

Dicho lo anterior, cuando presionas el primer párrafo la función invocada es la última declarada, por que el navegador encuentra que las 2 se llaman igual y toma la última declarada. por esa razón al hacer esta acción se modifica el segundo párrafo y no el primero.

De lo anterior puedes comprobar ya que al presionar el segundo párrafo si se modifica su mismo valor, por que este mismo invoca a la misma función y el navegador leerá la última declarada aunque el nombre sea el mismo.

Todo lo anterior ocurre por que al declarar 2 veces el mismo método el segundo anula al primero al llamarse igual.

Para estos casos aunque la intención es la misma convendría mas que les des un nombre único a cada función:

    <!DOCTYPE html>
    <html>
    <body>
    
    <p id="demo" onclick="myFunction1()">Click me HTML content (innerHTML).</p>
    <p id="other" onclick="myFunction2()">CHANGE IT!.</p>
    
    <script>
    function myFunction1() {
      document.getElementById("demo").innerHTML = "Paragraph changed!";
    }
    
    function myFunction2() {
      document.getElementById("other").innerHTML = "HELLO!";
    }
    </script>

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.