2

quisiera que el resultado en vez de que salga en console.log saliera en varios DIV o SPAN por ejemplo ---div Id="div1">resultado uno------div Id="div2">resultado dos------div Id="div3">resultado tres----div Id="div4">resultado cuatro---

aqui dejo el codigo en js

           function Obtenerhorariosdesdemedicos(){
           const Horario = {
           dia: {
           inicio: 8,
           fin: 13
           },
           tarde: {
           inicio: 16,
           fin: 20
           },
           cada: 15,
          };
        var now = new Date();
        var inicial = new Date(now.getFullYear(), now.getMonth(), 
        now.getDay(), Horario.dia.inicio, 0, 0, 0);
        var final  = new Date(now.getFullYear(), now.getMonth(), now.getDay(), 
        Horario.dia.fin, 0, 0, 0);
        for (var f = inicial; f <= final; f.setMinutes(f.getMinutes() + 
        Horario.cada))
        {
        let hora = ("0" + String(f.getHours())).slice(-2); //slice para dar 
        formato de 2 digitos
        let minutos = ("0" + String(f.getMinutes())).slice(-2);
        console.log(hora + ":" + minutos );
        }
        }
4
  • En el HTML necesitas un contenedor (div u otro) al que agregues el contenido que obtendrás al leer el bucle.
    – A. Cedano
    Commented el 11 sept. 2022 a las 14:17
  • intento con ciclo for y no me sale Commented el 11 sept. 2022 a las 14:57
  • var i = hora for (i=1;i<=fin;i++) { document.getElementById("<span" + i + ">Encabezado de nivel " + i + "</span" + i + ">") } Commented el 11 sept. 2022 a las 14:58
  • document.getElementById debe ser usado para alcanzar un elemento por su ID, y por lógica ese documento debe existir previamente. No lo estás usando correctamente.
    – A. Cedano
    Commented el 11 sept. 2022 a las 17:37

1 respuesta 1

0

Necesitarías tener un contenedor previamente identificado al cual agregarás posteriormente los elementos una vez creados. Yo he creado en el HTML este elemento: <div id="resultados"></div> y lo usaré para poner en él los diferentes elementos que se vayan creando.

Te mostraré una forma segura y optimizada de hacerlo.

Con respecto a la seguridad, sin duda encontrarás código que agregaría el contenido usando cosas como innerHTML, lo cual no es seguro, debido a los riesgos de inyección de código, por eso he creado los elementos con createElement() y he seteado sus atributos y su contenido con funciones dedicadas a esos fines.

Con respecto a la optimización, la web está plagada de malos ejemplos en los cuales, para casos como estos, sugieren agregar cada elemento al div contenedor dentro del mismo bucle, lo cual no es óptimo, porque no conviene modificar el DOM dentro de bucles. Por eso he usado un fragmento, he agregado todo a ese fragmento dentro del bucle y finalmente he agregado ese fragmento al div contenedor una vez el bucle haya terminado, así, el DOM se modificará una sola vez. Esta es la forma más óptima, porque cada vez que modificas el DOM, éste se renderiza. Si tu bucle tiene N elementos y modificas el DOM N veces, significa que el DOM se renderizará N veces y eso puede terminar siendo muy costoso.

Veamos el código. He puesto comentarios para que se entienda mejor. He usado un elemento p por parecerme el más adecuado. Pero lo puedes cambiar por un span, por un div o por lo que quieras. En ese caso, te aconsejo que los espacios entre líneas los gestiones mediante reglas de estilo en un archivo .css, aplicando así el principio de separación de responsabilidades.

Si hay algo que no has entendido, me lo puedes decir en un comentario, al pie de esta respuesta. Espero te sirva.

Obtenerhorariosdesdemedicos();

function Obtenerhorariosdesdemedicos() {
  /*Referencia al div contenedor general*/
  mDiv = document.getElementById('resultados');
  /*Fragmento para ir agregando cada elemento*/
  var mFragment = document.createDocumentFragment();


  const Horario = {
    dia: {
      inicio: 8,
      fin: 13
    },
    tarde: {
      inicio: 16,
      fin: 20
    },
    cada: 15,
  };
  var now = new Date();
  var inicial = new Date(now.getFullYear(), now.getMonth(),
    now.getDay(), Horario.dia.inicio, 0, 0, 0);
  var final = new Date(now.getFullYear(), now.getMonth(), now.getDay(),
    Horario.dia.fin, 0, 0, 0);
  /*Variable para identificar cada id de los p*/
  var i = 1;
  for (var f = inicial; f <= final; f.setMinutes(f.getMinutes() +
      Horario.cada)) {
    let hora = ("0" + String(f.getHours())).slice(-2); //slice para dar formato de 2 digitos
    let minutos = ("0" + String(f.getMinutes())).slice(-2);
    /*Creamos un elemento p*/
    var mP = document.createElement("p");
    /*Establecemos su id con el valor de i y aumentamos i en 1*/
    mP.setAttribute("id", `p${i++}`);
    //console.log(mP);
    /*Le agregamos el contenido de forma segura*/
    mP.appendChild(document.createTextNode(`${hora}:${minutos}`));
    /*Lo agregamos al fragmento*/
    mFragment.appendChild(mP);
    //console.log(hora + ":" + minutos);
  }
  /*Finalmente, agregamos el fragmento al div contenedor*/
  mDiv.appendChild(mFragment);
}
<div id="resultados"></div>

4
  • Excelente explicacion, me sirvió y anda perfecto...muchas gracias por tu valioso tiempo solucionando. Commented el 12 sept. 2022 a las 11:03
  • si quiero poner variables que se tomen de otros DIV en los horarios por ejemplo de 8 a 12 yo los tengo en unos div, cómo irían const Horario = { dia: { inicio: div1, fin: div2 }, tarde: { inicio: div3, fin: div4 }, cada: div5, }; Commented el 12 sept. 2022 a las 11:07
  • @JulioAndres no entendí tu pregunta. Cualquier cosa que exista previamente la puedes obtener usando document.getElementById, de modo que si tienes algo en un div y quieres obtener esa información, alcanzarías ese div por su id y recogerías lo que hay en él. Cabe decir que hay otras formas de guardar información, como los atributos data- por ejemplo. Sea como sea, si tienes una duda nueva puedes abrir una nueva pregunta, aunque se refiera al mismo problema. Ten en cuenta que SO funciona por preguntas.
    – A. Cedano
    Commented el 12 sept. 2022 a las 11:12
  • infinitas gracias @A. Cedano Commented el 12 sept. 2022 a las 11:31

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.