5

Tengo el siguiente código de prueba:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <a href="#Shop">Tienda</a>
  <a href="#Profile">Perfil</a>
  <a href="#Contact">Contacta</a>

  <div id="content"></div>
</body>

</html>

<script>
var targetDiv = document.getElementById("content");
var htmlContent = "";

function populateData(event) {
  switch (event.target.href) {
    case "Shop": {
      htmlContent =
        '<p style="text-align:center">Texto de prueba</p>
       <img src="../img/prueba.png" alt="">';

      break;
    }
    case "Profile": {
      htmlContent =
        '<p style="text-align:center">Texto de prueba numero 2</p>
       <img src="../img/prueba.png" alt="">';
      break;
    }
  }
  targetDiv.innerHTML = htmlContent;
}
</script>

El problema que tengo es que el código dentro del htmlContent no lo detecta bien. No sé cómo se debe escribir para que lo ejecute correctamente.

Lo que pretendo en el código es, según el hipervinculo que presionan, mostrar un contenido. Otro en el mismo contenedor para evitar crear páginas HTML. El contenido del contenedor sería un div normal con una imagen, vídeo y texto. Pero, al poner algo que no sea un texto entre "" no me lo ejecuta bien.

5
  • Te están faltando comillas al parecer Commented el 29 jun. 2020 a las 8:20
  • Aunque le ponga comillas, si dejo espacio no se me muestra nada, si solo dejara el tag <p> si se muestra pero al poner la imagen deja de verse todo, con i sin comillas Commented el 29 jun. 2020 a las 8:22
  • Tenes que usar backticks o escapear el salto de línea con un / invertido Commented el 29 jun. 2020 a las 8:30
  • Podrías poner un ejemplo? Commented el 29 jun. 2020 a las 8:35
  • Vale, muchas gracias. Commented el 29 jun. 2020 a las 8:38

3 respuestas 3

6

Estuve analizando un poco el código publicado acá y encontré varios detalles que puedes corregir:

En lugar de escribir:

event.target.href

Cámbialo por:

event.tarjet.getAttribute("href")

La razón es que la primera te devuelve una ruta absoluta mientras que la segunda te devuelve la cadena que necesitas.

Por ejemplo, si partimos de la siguiente estructura HTML:

<a href="#Shop">Tienda</a>
<a href="#Profile">Perfil</a>
<a href="#Contact">Contacta</a>

<div id="content"></div>

Para el caso de las switch , también debes aplicar las siguientes correcciones que se explican más abajo en el siguiente fragmento de código en sus comentarios:

function populateData(event) {
  switch (event.target.href) { // Colocar event.target.getAttribute("href") en su lugar.

      // No necesitas colocar llaves ({}) aquí,
      // además, de faltar la almohadilla (#)
      // en «Shop»:
      case 'Shop': {
        ...
        break;
      }

      // No necesitas colocar llaves ({}) aquí,
      // además, de faltar la almohadilla (#)
      // en «Profile»:
      case 'Profile': {
        ...
        break;
      }
  }

  targetDiv.innerHTML = htmlContent;
}

Entonces, teniendo claro todo lo anterior las correcciones que podrías aplicar serían:

  • Cambiar event.target.href por event.target.getAttribute("href") para obtener el valor específico del atributo href en lugar de su ruta absoluta.

  • Colocarle las almohadillas o hastash (#) a Shop y Profile.

Ejemplo en acción

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:

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>

Importante: El problema se encontraba principalmente en la primera parte mencionada de la página, solo que en esta oportunidad tomé la tarea de simplificar un poco el código.

Tome en cuenta también que la hoja de estilo se colocó con el objeto de hacer más fácil de visualizar el ejemplo. Sin embargo, no forma parte de la solución porque su función es ilustrar.

4
  • Siempre recordar que las plantillas de cadena de texto no son compatibles con ninguna versión de IE y tampoco en Opera Mini. Mayor info: caniuse string literals Commented el 29 jun. 2020 a las 9:23
  • Hola @MauricioContreras, gracias por la observación :). Pero no olvides que ese navegador ya cayó casi completamente en desuso (afortunadamente). Commented el 29 jun. 2020 a las 9:35
  • Gracias por compartirlo @MauricioContreras. Lamentablemente, ese es el problema que hemos presentado la mayoría de los desarrolladores Web con los navegadores. Afortunadamente, no tanto ahora como sí lo fue en el pasado. De hecho, las «funciones flechas» son parte de ECMAScript 6 y no todos los navegadores la soportan. De allí el uso de algunos transpiladores para traducir ECMAScript 6 a ECMAScript 5, que es la soportada por la mayoría de los navegadores Web de hoy. Commented el 29 jun. 2020 a las 9:55
  • De hecho, en este sitio Web pueden transpilar el código a uno más antiguo para darle soporte a navegadores más antiguo o que no le den soporte a ECMAScript 6. Pueden transpilar el código con BabelJS Commented el 29 jun. 2020 a las 9:57
3

Lo que te ocurría es que tienes una función de JavaScript (populateData()) pero no la estás llamando desde ningún elemento. Lo que he cambiado es el atributo href de dirección por el evento onclick y le pasas como parámetro el tipo de dive que quieres que se muestre.

Por otro lado, si vas a añadir un elemento HTML con salto de líneas no utilices '', deberías utilizar `` que te permite realizar saltos de línea y adición de parámetros con ${}. A esto se le llama interpolación de strings.

Como adición al código he añadido el método default para cuando se le pase algún parámetro incorrecto te muestre un mensaje.

var targetDiv = document.getElementById('content');
var htmlContent = '';

function populateData(idTipe) {

  switch (idTipe) {
    case 'Shop':
      {
        htmlContent = '<p style="text-align:center">Texto de prueba</p> <img src="../img/prueba.png" alt="">';
        break;
      }
    case 'Profile':
      {
        htmlContent = '<p style="text-align:center">Texto de prueba numero 2</p>  <img src="../img/prueba.png" alt="">';
        break;
      }
    default:
      console.log('Lo lamentamos, por el momento no disponemos de ' + idTipe + '.');
      break;
  }

  targetDiv.innerHTML = htmlContent;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <a href="#" onclick="populateData('Shop');">Tienda</a>
  <a href="#" onclick="populateData('Profile');">Perfil</a>
  <a href="#" onclick="populateData('Contact');">Contacta</a>

  <div id="content"></div>
</body>

</html>

8
  • Veo que utilizas ' ' igualmente aun teniendo espacios. Ahora lo probaré, gracias por el aporte. Commented el 29 jun. 2020 a las 9:04
  • Si, pero lo he puesto en una única linea por eso me lo toma sin problemas si vas a aplicar saltos de linea es necesario o concatenar strings o utilizar `` Commented el 29 jun. 2020 a las 9:11
  • Acabo de implementar el código y me colapsa la pagina, Failed to load resource: the server responded with a status of 500 () Commented el 29 jun. 2020 a las 9:29
  • 1
    De php tengo poca idea pero creo que es porque el echo lo estas poniendo con ' ' y dentro de la funcion estas poniendo ' ' por lo que entiende que la función se corta antes y te da un error de systaxis para escapar caracteres hazlo asi "Para escapar caracteres se hace \"así\"." Commented el 29 jun. 2020 a las 9:41
  • 1
    vale la pongo enseguida Commented el 29 jun. 2020 a las 9:45
1

como ya se había mencionado antes, el problema es que no llamabas la función populateData así como en las comillas que en lugar de simples deben ser comillas invertidas o backticks, te recomiendo hacerlo de la siguiente forma, la cual considero la más simple y práctica.

   <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
        <div id="options" onclick="populateData()">
        <a href="#Shop">Tienda</a>
        <a href="#Profile">Perfil</a>
        <a href="#Contact">Contacta</a>
    </div>
        <div id="content"></div>
    </body>
    </html>

    <script>
        var targetDiv = document.getElementById('content');
            var htmlContent = '';
            function populateData(){
                document.getElementById('options').addEventListener('click', function(e){
                    var path = e.target.hash
                    switch(path){
                        case '#Shop':{
                            htmlContent = `<p>TIENDA</p>
                            <img src="../img/prueba.png" alt="">';`;
                            break;
                        }
                        case '#Profile':{
                            htmlContent = `<p>PERFIL</p>
                            <img src="../img/prueba.png" alt="">`;
                            break;
                        }
                        case '#Contact':{
                            htmlContent = `<p>CONTACTO</p>`;
                            break;
                        }
                    }
                    targetDiv.innerHTML = htmlContent;

            });

            }
            
     </script>

Nota:

  1. Se agregó un div para contener las opciones al cual se le puso un id y un onclick para que al darle clic ejecute la función.

  2. Se creó la función que cacha el evento click de del div options y luego la variable path es el evento en su propiedad path y la propiedad hash lo cual regresa el nombre del href en luegar de la ruta para así facilitar las cosas y evitar errores.

  3. Se cambiaron las comillas por invertidas.

  4. Por ultimo cabe hacer notar que para que funcione el proyecto hay que tener las imágenes en las rutas adecuadas, caso contrario, no se verán las imágenes.

1
  • 1
    Hola @crazyProgrammer. Gracias por aporte. No había pensado en e.target.hash, lo que lo hace bastante práctico y corto por lo que valió la pena marcarlo como útil esta respuesta también. Commented el 29 jun. 2020 a las 10:16

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.