1

Hola estoy empezando a usar JavaScript/HTML. Tengo este código y a la hora de cambiar de imprimir la información en consola concatenando cadena + variable a usar template literal, pasa de imprimir correcto la información a imprimir undefined. Tampoco logro actualizar la información HTML desde JavaScript. ¿Que estoy haciendo mal?

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Ejemplo DOM con JavaScript</title>
  </head>
  <body>
    <h1 id="cabecero">Ejemplo DOM con JavaScript</h1>
    <p id="parrafo">Saludos!</p>
    <script>
      let cabecero = document.getElementById("cabecero").innerHTML;
      console.log("Valor cabecero: " + cabecero);
      let par = document.getElementById("parrafo").innerHTML;
      console.log(`Valor parrafo: ${par.innerHTML}`);
      par.innerHTML = "Nuevo contenido parrafo";
      cabecero.innerHTML = "Nuevo cabecero";
    </script>
  </body>
</html>

1 respuesta 1

2

El problema es que al definir cabecero y par estás definiendo el innerHTML en lugar del elemento. Deberías quitar el .innerHTML al capturarlos, luego al mostrar sus valores en los console.log si agregarle el .innerHTML y finalmente hacer el cambio de su contenido.

Ejemplos para entender la diferencia:

//Esto captura el contenido
 let cabecero = document.getElementById("cabecero").innerHTML;

//Esto captura el elemento que es lo ideal en este caso
 let cabecero = document.getElementById("cabecero");

Finalmente se puede hacer algo como:

console.log(cabecero.innerHTML) //Muestra el contenido en consola

cabecero.innerHTML = "nuevo valor" //Cambia el contenido.

El código completo quedaría así:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <title>Ejemplo DOM con JavaScript</title>
    </head>
    <body>
      <h1 id="cabecero">Ejemplo DOM con JavaScript</h1>
      <p id="parrafo">Saludos!</p>

      <script>
        let cabecero = document.getElementById("cabecero");
        console.log("Valor cabecero: " + cabecero.innerHTML);
        let par = document.getElementById("parrafo");
        console.log(`Valor parrafo: ${par.innerHTML}`);
        par.innerHTML = "Nuevo contenido parrafo";
        cabecero.innerHTML = "Nuevo cabecero";
      </script>
    </body>
  </html>
</html>

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.