Estoy tratando de establecer un atributo onclick que active una función y pase parámetros en esa función. Algunos parámetros provienen directamente del elemento de mi matriz en el que estoy generando el botón en el que quiero crear el nuevo atributo al hacer clic. Tan pronto como uso un atributo de elemento (por ejemplo, element.startTime), aparece el error "Error de sintaxis no detectado: falta) después de la lista de argumentos".
Qué estoy haciendo mal ?
Aquí está mi código:
if(days[day]) { days[day].forEach( (element) => { var scheduleChild = document.createElement('div') scheduleChild.className = 'btn btn-link text-center schedulesTime' var address = document.createAttribute("data-address") address.value = element.address scheduleChild.setAttributeNode(address) var startTime = document.createAttribute("data-startTime") startTime.value = element.startTime scheduleChild.setAttributeNode(startTime) var endTime = document.createAttribute("data-endTime") endTime.value = element.endTime scheduleChild.setAttributeNode(endTime) scheduleChild.innerText = element.startTime+'-'+element.endTime scheduleChild.setAttribute('onClick','bookTimeslot('+id_provider+','+element.startTime+')') dayParent.appendChild(scheduleChild) } )}La creación del botón está funcionando y puedo ver el atributo onclick establecido en mi botón. Aquí como ejemplo, el HTML de un botón que creo:
<div class="btn btn-link text-center schedulesTime" data-address="3" data-starttime="09:00" data-endtime="09:45" onclick="bookTimeslot(3,09:00)">09:00-09:45</div>No intente construir cadenas de código como esa. En su lugar, asigne una función real (o mejor aún, use addEventListener ):
scheduleChild.addEventListener("click", () => bookTimeslot(id_provider, element.startTime));El problema más probable en este caso específico es la falta de comillas alrededor de la cadena de fecha, pero nuevamente, construir cadenas de código es propenso a errores e innecesario.
Nota: Eso utilizará el valor de element.startTime a partir del momento en que se produce el clic. Si es posible que ese elemento pueda cambiar, y desea que se use el valor anterior, tómelo localmente:
const startTime = new Date(+element.startTime); // If it's a `Date` scheduleChild.addEventListener("click", () => bookTimeslot(id_provider, startTime)); Nota al margen: no tiene que crear nodos de atributos directamente, puede usar setAttribute . Así que esto:
var address = document.createAttribute("data-address") address.value = element.address scheduleChild.setAttributeNode(address)se convierte
scheduleChild.setAttribute("data-address", element.address); Nota al margen 2: está utilizando una función de flecha, por lo que claramente se encuentra en un entorno ES2015+. var está efectivamente en desuso, en general recomiendo let o const .
Con esos cambios:
days[day].forEach( (element) => { const scheduleChild = document.createElement("div"); scheduleChild.className = "btn btn-link text-center schedulesTime"; scheduleChild.setAttribute("data-address", element.address); scheduleChild.setAttribute("data-startTime", element.startTime); // You might want to do the Date-to-string conversion intentionally here rather than relying on the default scheduleChild.setAttribute("data-endTime", element.endTime); // (same) scheduleChild.innerText = element.startTime + "-" + element.endTime;// (same) scheduleChild.addEventListener("click", () => bookTimeslot(id_provider, element.startTime)); dayParent.appendChild(scheduleChild); } )};El error se debe al valor de startTime, ya que su valor contiene : , por lo que debe ponerlo dentro de un "" . me gusta:
scheduleChild.setAttribute('onClick','bookTimeslot('+id_provider+',"'+element.startTime+'")')