2

En el código a continuación pretendo usar el método .replace() de dos formas distintas y en ningún caso consigo el cambio de texto deseado:

  1. El evento onclick del botón llama a la función myFunction pero ésta no reemplaza Windows por ZorinOS.
  2. El evento onmouseover llama a la función mySecondFunction, pero ésta no reemplaza el valor del span al que le he asignado el correspondiente id="demo2".

Me surgen dos dudas:

  1. Al comentar la segunda función, el evento onclick del botón sí que activa myFunction. ¿Por qué sucede esto? ¿Cómo interfiere la segunda función con la primera?
  2. ¿Por qué mySecondFunction no cambia el span con id="demo2" cuando comento la primera función?

JavaScript String Methods

Replace "Windows" with "ZorinOS" in the next paragraph:

Please visit Windows!

Try it

Please visit Windows!

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript String Methods</h2>

<p>Replace "Windows" with "ZorinOS" in the next paragraph:</p>

<p id="demo">Please visit Windows!</p>

<button onclick="myFunction()">Try it</button>

<p>Please visit <span id="demo2" onmouseover="mySecondFunction()">Windows</span>!</p>

</body>
</html>
<script>
function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
  text.replace("Windows","ZorinOS");
}

function mySecondFunction(){
  let text2 = document.getElementById("demo2").innerHTML;
  document.getElementById("demo2").innerHTML =
  text2.replace("Windows","ZorinOS";)
}
</script>

2 respuestas 2

2

Corrigiendo lo que marco en los comentarios se debería solucionar. Tienes un ;)cuando debería ser );.

function mySecondFunction(){
  let text2 = document.getElementById("demo2").innerHTML;
  document.getElementById("demo2").innerHTML =
  text2.replace("Windows","ZorinOS";)
  /* El error:                     ^^ */
}


function mySecondFunction() {
    let text2 = document.getElementById("demo2").innerHTML;
    document.getElementById("demo2").innerHTML =
    text2.replace("Windows", "ZorinOS");
    /* Cambiado                      ^^ */
}
2
  • Menudo error el mío… de traca! Muchas gracias por la corrección! Commented el 8 ene. 2022 a las 9:48
  • 1
    @IvanSanczewski nos pasa a muchos. El tema es que lo has podido solucionar. Saludos!
    – OscarR
    Commented el 8 ene. 2022 a las 10:37
1

Tienes un ; de mas. Debería funcionar sin problemas.

function myFunction() {
  let text = document.getElementById("demo").innerHTML;
  document.getElementById("demo").innerHTML =
    text.replace("Windows", "ZorinOS");
}

function mySecondFunction() {
  let text2 = document.getElementById("demo2").innerHTML;
  document.getElementById("demo2").innerHTML =
    text2.replace("Windows", "ZorinOS")
}
<!DOCTYPE html>
<html>

<body>

  <h2>JavaScript String Methods</h2>

  <p>Replace "Windows" with "ZorinOS" in the next paragraph:</p>

  <p id="demo">Please visit Windows!</p>

  <button onclick="myFunction()">Try it</button>

  <p>Please visit <span id="demo2" onmouseover="mySecondFunction()">Windows</span>!</p>

</body>

</html>

Edición


Javascript siempre requiere ;. Cuando los omites, una función interna los agrega, pero en ocasiones (y cuando conoces poco del lenguaje) lo interpreta mal. Aqui un ejemplo:

const a = 1;
const b = 2;
const c = a+b;
(a+b).toString()
//Debe salir 3
console.log(c)

const a = 1
const b = 2
const c = a+b
(a+b).toString()

console.log(c)

Este último caso en particular se corrige así:

const a = 1
const b = 2
const c = a+b
;(a+b).toString()

console.log(c)

Al final, es tu decisión, pero hay que entender que los semicolons si o sí existen. No es como python, que naturalmente fue creado sin estos. Javascript ha ido cambiando para ser más aceptado y algunas cosas han sido muy buenas, pero otras tanto no. Esto lo saque de este link

3
  • Gracias por la corrección! Me surge una pequeña duda: ¿Cuál es la mejor praxis para la última línea de una función: omitir el ultimo ;, que como propones soluciona el problema, o ponerlo siempre, como propone @OscarR? Commented el 8 ene. 2022 a las 9:51
  • 1
    Edite mi respuesta para constestarte.
    – Legna
    Commented el 8 ene. 2022 a las 16:50
  • Muy agradecido por el código de ejemplo y el artículo!! :) Commented el 8 ene. 2022 a las 22:07

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.