I have the following problem, JS does not take what is inside a DIV with the ID, yes I add the numbers manually in a SCHEDULE CONST it takes it, but when adding the variable it does not take it.
What would I need to make it work?
Javascript code
function Obtenerhorariosdesdemedicos() {
/*Referencia al div contenedor general*/
mDiv = document.getElementById('resultados');
/*variables que contienen los horarios*/
/*turno mañana*/
/*toma lo que esta en el DIV tmdesde*/
mtminicio = document.getElementById('tmdesde').innerHTML
/*toma lo que esta en el DIV tmhasta*/
mtmfin = document.getElementById('tmhasta').innerHTML
/*turno tarde*/
/*toma lo que esta en el DIV ttdesde*/
ttminicio = document.getElementById('ttdesde').innerHTML
/*toma lo que esta en el DIV tthasta*/
ttmfin = document.getElementById('tthasta').innerHTML
/*cada tantos minutos de atencion*/
/*toma lo que esta en el DIV cada*/
mcada = document.getElementById('cada').innerHTML
/*Fragmento para ir agregando cada elemento*/
var mFragment = document.createDocumentFragment();
const Horario = {
dia: {
inicio: mtminicio,
fin: mtmfin
},
tarde: {
inicio: ttminicio,
fin: ttmfin
},
cada: mcada,
};
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++}`);
/*Le agregamos el contenido de forma segura*/
mP.appendChild(document.createTextNode(`${hora}:${minutos}`));
/*Lo agregamos al fragmento*/
mFragment.appendChild(mP);
}
/*Finalmente, agregamos el fragmento al div contenedor*/
mDiv.appendChild(mFragment);
}
HTML code
<div id="resultados" class="mb-6"></div>
I add HTML code where the schedules appear
<?php
$objCon = new Conexion();
$conexion = $objCon->conectar();
$sql = "SELECT nombre, tmdesde, tmhasta,
ttdesde, tthasta, cada
FROM lunes WHERE nombre = 'JULIO ANDRES'";
$resultadolunes = mysqli_query($conexion,
$sql);
while($lunes =
mysqli_fetch_array($resultadolunes)) {
?>
<button type="button"
onclick="Obtenerhorariosdesdemedicos()">
ver</button>
<div> <?php echo '<h4> Turno Mañana </h4>'?>
</div>
<div> <h4 id="tmdesde"> <?php echo
$lunes['tmdesde']?> </h4></div>
<div> <h4 id="tmhasta"> <?php echo
$lunes['tmhasta']?> </h4></div>
<div> <?php echo '<h4> Turno Tarde </h4>'?>
</div>
<div> <h4 id="ttdesde"> <?php echo
$lunes['ttdesde']?> </h4></div>
<div> <h4 id="tthasta"> <?php echo
$lunes['tthasta']?> </h4></div>
<div> <?php echo '<h4> Turnos cada </h4>'?>
</div>
<div> <h4 id="cada"> <?php echo $lunes['cada']?>
</h2></div>
<?php
}
?>
After asking you to add the
HTML
, I have been able to assess that your problem is associated with the codeHTML
you generate fromPHP
.This is because
HTML
you can't use the samevalor
delatributo
ID
on multiple elements:For example, this would be an error:
the second Button that is generated, the event will not be assigned or it will not work correctly.
the correct thing would be to identify each input by means of an id that is similar but not the same or to implement the attribute:
class
oname
with the querySelector method .You can also implement an event delegation, EventListener and mix it with the
querySelector
previous one avoiding using the onclick inside the button.So the ideal would be to implement
querySelector
something like:[name^='someName']
will match allname
that start with someName.[name$='someName']
will match all thosename
ending in someName.[name*='someName']
will match allname
containing someName.If you are looking for the attribute of
class
, just replace thename
with theclass
.