Skip to main content
Corrección de comentario en el código
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30
var contenido = document.querySelector("#content"),
  htmlContent = "";

const populateData = (event) => {
  // Se utiliza «event.target.getAttribute("href")» en su 
  // lugar. El objetivo es obtener su ruta relativa 
  // en lugar de su ruta absoluta:
  let href = event.target.getAttribute("href");

  switch (href) {
    // Almohadilla (#) puesta en «Shop»
    case "#Shop":
      htmlContent = `
        <p>Texto de prueba</p>
        <img src="https://cdn.pixabay.com/photo/2020/05/13/14/44/poppy-5167737_960_720.jpg" alt="">`;
      break;

    // Almohadilla (#) puesta en «Profile»
    case "#Profile":
      htmlContent = `<p>Texto de prueba numero 2</p>
      <img src="https://cdn.pixabay.com/photo/2017/03/03/09/43/macro-2113633_960_720.jpg" alt="">`;
      break;
    
    // Acción por defectoContacto:
    case "#Contact":
      htmlContent = "<h2>Contacto</h2>"
      break;
  }

  // En su lugar, nuestra función devuelve el contenido 
  // que cargará en el elemento «#content»:
  return htmlContent;
};

// Tome en cuenta que debe capturar el evento del mouse
// para permitirle al usuario interactuar con los enlaces:
menu.onclick = (e) => {
  contenido.innerHTML = populateData(e);
};
:root {
  font-family: "Open Sans", sans-serif, arial;
}

a {
  color: #0080d4;
  text-decoration: none;
  padding: 0 10px;
}

a:hover {
  text-decoration: underline;
}

ul {
  display: flex;
  list-style: none;
  padding-left: 0;
}

li {
  transition: 300ms ease;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}

li:hover {
  background-color: rgba(0, 128, 213, 0.05);
}

img {
  max-width: 100%;
  max-height: 300px;
}
<!-- HTML simplificado -->
<ul id="menu">
  <li><a href="#Shop">Tienda</a></li>
  <li><a href="#Profile">Perfile</a></li>
  <li><a href="#Contact">Contacto</a></li>
</ul>

<div id="content"></div>
var contenido = document.querySelector("#content"),
  htmlContent = "";

const populateData = (event) => {
  // Se utiliza «event.target.getAttribute("href")» en su 
  // lugar. El objetivo es obtener su ruta relativa 
  // en lugar de su ruta absoluta:
  let href = event.target.getAttribute("href");

  switch (href) {
    // Almohadilla (#) puesta en «Shop»
    case "#Shop":
      htmlContent = `
        <p>Texto de prueba</p>
        <img src="https://cdn.pixabay.com/photo/2020/05/13/14/44/poppy-5167737_960_720.jpg" alt="">`;
      break;

    // Almohadilla (#) puesta en «Profile»
    case "#Profile":
      htmlContent = `<p>Texto de prueba numero 2</p>
      <img src="https://cdn.pixabay.com/photo/2017/03/03/09/43/macro-2113633_960_720.jpg" alt="">`;
      break;
    
    // Acción por defecto:
    case "#Contact":
      htmlContent = "<h2>Contacto</h2>"
      break;
  }

  // En su lugar, nuestra función devuelve el contenido 
  // que cargará en el elemento «#content»:
  return htmlContent;
};

// Tome en cuenta que debe capturar el evento del mouse
// para permitirle al usuario interactuar con los enlaces:
menu.onclick = (e) => {
  contenido.innerHTML = populateData(e);
};
:root {
  font-family: "Open Sans", sans-serif, arial;
}

a {
  color: #0080d4;
  text-decoration: none;
  padding: 0 10px;
}

a:hover {
  text-decoration: underline;
}

ul {
  display: flex;
  list-style: none;
  padding-left: 0;
}

li {
  transition: 300ms ease;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}

li:hover {
  background-color: rgba(0, 128, 213, 0.05);
}

img {
  max-width: 100%;
  max-height: 300px;
}
<!-- HTML simplificado -->
<ul id="menu">
  <li><a href="#Shop">Tienda</a></li>
  <li><a href="#Profile">Perfile</a></li>
  <li><a href="#Contact">Contacto</a></li>
</ul>

<div id="content"></div>
var contenido = document.querySelector("#content"),
  htmlContent = "";

const populateData = (event) => {
  // Se utiliza «event.target.getAttribute("href")» en su 
  // lugar. El objetivo es obtener su ruta relativa 
  // en lugar de su ruta absoluta:
  let href = event.target.getAttribute("href");

  switch (href) {
    // Almohadilla (#) puesta en «Shop»
    case "#Shop":
      htmlContent = `
        <p>Texto de prueba</p>
        <img src="https://cdn.pixabay.com/photo/2020/05/13/14/44/poppy-5167737_960_720.jpg" alt="">`;
      break;

    // Almohadilla (#) puesta en «Profile»
    case "#Profile":
      htmlContent = `<p>Texto de prueba numero 2</p>
      <img src="https://cdn.pixabay.com/photo/2017/03/03/09/43/macro-2113633_960_720.jpg" alt="">`;
      break;
    
    // Contacto:
    case "#Contact":
      htmlContent = "<h2>Contacto</h2>"
      break;
  }

  // En su lugar, nuestra función devuelve el contenido 
  // que cargará en el elemento «#content»:
  return htmlContent;
};

// Tome en cuenta que debe capturar el evento del mouse
// para permitirle al usuario interactuar con los enlaces:
menu.onclick = (e) => {
  contenido.innerHTML = populateData(e);
};
:root {
  font-family: "Open Sans", sans-serif, arial;
}

a {
  color: #0080d4;
  text-decoration: none;
  padding: 0 10px;
}

a:hover {
  text-decoration: underline;
}

ul {
  display: flex;
  list-style: none;
  padding-left: 0;
}

li {
  transition: 300ms ease;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}

li:hover {
  background-color: rgba(0, 128, 213, 0.05);
}

img {
  max-width: 100%;
  max-height: 300px;
}
<!-- HTML simplificado -->
<ul id="menu">
  <li><a href="#Shop">Tienda</a></li>
  <li><a href="#Profile">Perfile</a></li>
  <li><a href="#Contact">Contacto</a></li>
</ul>

<div id="content"></div>
Formateo de código
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30
var contenido = document.querySelector("#content"),
  htmlContent = "";

const populateData = (event) => {
  // Se utiliza «event.target.getAttribute("href")» en su 
  // lugar. El objetivo es obtener su ruta relativa 
  // en lugar de su ruta absoluta:
  let href = event.target.getAttribute("href");

  switch (href) {
    // Almohadilla (#) puesta en «Shop»
    case "#Shop":
      htmlContent = `
        <p style="text-align:center">Texto<p>Texto de prueba</p>
        <img src = "httpssrc="https://cdn.pixabay.com/photo/2020/05/13/14/44/poppy-5167737_960_720.jpg" alt = "" >`;alt="">`;
      break;

    // Almohadilla (#) puesta en «Profile»
    case "#Profile":
      htmlContent = `<p style="text-align:center">Texto`<p>Texto de prueba numero 2 <2</p> 
 <img src = "https  <img src="https://cdn.pixabay.com/photo/2017/03/03/09/43/macro-2113633_960_720.jpg" alt = "" >`;alt="">`;
      break;
    
    // Acción por defecto:
    case "#Contact":
      htmlContent = "<h2>Contacto</h2>"
      break;
  }

  // En su lugar, nuestra función devuelve el contenido 
  // que cargará en el elemento «#content»:
  return htmlContent;
};

// Tome en cuenta que debe capturar el evento del mouse
// para permitirle al usuario interactuar con los enlaces:
menu.onclick = (e) => {
  contenido.innerHTML = populateData(e);
};
:root {
  font-family: "Open Sans", sans-serif, arial;
}

a {
  color: #0080d4;
  text-decoration: none;
  padding: 0 10px;
}

a:hover {
  text-decoration: underline;
}

ul {
  display: flex;
  list-style: none;
  padding-left: 0;
}

li {
  transition: 300ms ease;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}

li:hover {
  background-color: rgba(0, 128, 213, 0.05);
}

img {
  max-width: 100%;
  max-height: 300px;
}
<!-- HTML simplificado -->
<ul id="menu">
  <li><a href="#Shop">Tienda</a></li>
  <li><a href="#Profile">Perfile</a></li>
  <li><a href="#Contact">Contacto</a></li>
</ul>

<div id="content"></div>
var contenido = document.querySelector("#content"),
  htmlContent = "";

const populateData = (event) => {
  // Se utiliza «event.target.getAttribute("href")» en su 
  // lugar. El objetivo es obtener su ruta relativa 
  // en lugar de su ruta absoluta:
  let href = event.target.getAttribute("href");

  switch (href) {
    // Almohadilla (#) puesta en «Shop»
    case "#Shop":
      htmlContent = `
        <p style="text-align:center">Texto de prueba</p>
        <img src = "https://cdn.pixabay.com/photo/2020/05/13/14/44/poppy-5167737_960_720.jpg" alt = "" >`;
      break;

    // Almohadilla (#) puesta en «Profile»
    case "#Profile":
      htmlContent = `<p style="text-align:center">Texto de prueba numero 2 </p> <img src = "https://cdn.pixabay.com/photo/2017/03/03/09/43/macro-2113633_960_720.jpg" alt = "" >`;
      break;
    
    // Acción por defecto:
    case "#Contact":
      htmlContent = "<h2>Contacto</h2>"
      break;
  }

  // En su lugar, nuestra función devuelve el contenido 
  // que cargará en el elemento «#content»:
  return htmlContent;
};

// Tome en cuenta que debe capturar el evento del mouse
// para permitirle al usuario interactuar con los enlaces:
menu.onclick = (e) => {
  contenido.innerHTML = populateData(e);
};
:root {
  font-family: "Open Sans", sans-serif, arial;
}

a {
  color: #0080d4;
  text-decoration: none;
  padding: 0 10px;
}

a:hover {
  text-decoration: underline;
}

ul {
  display: flex;
  list-style: none;
  padding-left: 0;
}

img {
  max-width: 100%;
  max-height: 300px;
}
<!-- HTML simplificado -->
<ul id="menu">
  <li><a href="#Shop">Tienda</a></li>
  <li><a href="#Profile">Perfile</a></li>
  <li><a href="#Contact">Contacto</a></li>
</ul>

<div id="content"></div>
var contenido = document.querySelector("#content"),
  htmlContent = "";

const populateData = (event) => {
  // Se utiliza «event.target.getAttribute("href")» en su 
  // lugar. El objetivo es obtener su ruta relativa 
  // en lugar de su ruta absoluta:
  let href = event.target.getAttribute("href");

  switch (href) {
    // Almohadilla (#) puesta en «Shop»
    case "#Shop":
      htmlContent = `
        <p>Texto de prueba</p>
        <img src="https://cdn.pixabay.com/photo/2020/05/13/14/44/poppy-5167737_960_720.jpg" alt="">`;
      break;

    // Almohadilla (#) puesta en «Profile»
    case "#Profile":
      htmlContent = `<p>Texto de prueba numero 2</p> 
      <img src="https://cdn.pixabay.com/photo/2017/03/03/09/43/macro-2113633_960_720.jpg" alt="">`;
      break;
    
    // Acción por defecto:
    case "#Contact":
      htmlContent = "<h2>Contacto</h2>"
      break;
  }

  // En su lugar, nuestra función devuelve el contenido 
  // que cargará en el elemento «#content»:
  return htmlContent;
};

// Tome en cuenta que debe capturar el evento del mouse
// para permitirle al usuario interactuar con los enlaces:
menu.onclick = (e) => {
  contenido.innerHTML = populateData(e);
};
:root {
  font-family: "Open Sans", sans-serif, arial;
}

a {
  color: #0080d4;
  text-decoration: none;
  padding: 0 10px;
}

a:hover {
  text-decoration: underline;
}

ul {
  display: flex;
  list-style: none;
  padding-left: 0;
}

li {
  transition: 300ms ease;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 5px;
}

li:hover {
  background-color: rgba(0, 128, 213, 0.05);
}

img {
  max-width: 100%;
  max-height: 300px;
}
<!-- HTML simplificado -->
<ul id="menu">
  <li><a href="#Shop">Tienda</a></li>
  <li><a href="#Profile">Perfile</a></li>
  <li><a href="#Contact">Contacto</a></li>
</ul>

<div id="content"></div>
Corrección gramatical
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30

Ejemplo completo de las correcciones aplicadas. Sin embargo, se aplicaron algunos cambios sencillos para reproducir el ejemplo, pero con el códigoLo que sigue es un poco más legibleejemplo sencillo para poner en práctica lo explicado en esta publicación. RecuerdeNo olvides leer los comentarios del código:

Ejemplo completo de las correcciones aplicadas. Sin embargo, se aplicaron algunos cambios sencillos para reproducir el ejemplo, pero con el código un poco más legible. Recuerde leer los comentarios:

Lo que sigue es un ejemplo sencillo para poner en práctica lo explicado en esta publicación. No olvides leer los comentarios del código:

Mejora del enfoque del código
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30
Loading
Origen Enlace
David E. Luna M.
  • 2.9k
  • 4
  • 14
  • 30
Loading