I'm trying to set an onclick attribute triggering a function and pass parameters in that function. Some parameters come directly from the element of my array in which I'm generating the button in which I want create the new attribute on click. As soon as I use an element attribute (e.g. element.startTime), I get the error "Uncaught SyntaxError: missing ) after argument list".
What am I doing wrong ?
Here is my code :
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)
}
)}
The creation of the button is working and I can see the onclick attribute set in my button. Here as example, the HTML of a button I create :
<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>
Don't try to build code strings like that. Instead, assign an actual function (or better yet, use addEventListener):
scheduleChild.addEventListener("click", () => bookTimeslot(id_provider, element.startTime));
The most likely issue in this specific case is the lack of quotes around the date string, but again, building code strings is error-prone and unnecessary.
Note: That will use the value of element.startTime as of when the click occurs. If it's possible that element may change, and you want the previous value to be used, grab it locally:
const startTime = new Date(+element.startTime); // If it's a `Date`
scheduleChild.addEventListener("click", () => bookTimeslot(id_provider, startTime));
Side note: You don't have to create attribute nodes directly, you can use setAttribute. So this:
var address = document.createAttribute("data-address")
address.value = element.address
scheduleChild.setAttributeNode(address)
becomes
scheduleChild.setAttribute("data-address", element.address);
Side note 2: You're using an arrow function, so clearly you're in an ES2015+ environment. var is effectively deprecated, in general I recommend let or const.
With those changes:
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);
}
)};
The error is because of the value of startTime, since it's value contains : , so you shoud put it inside an "". like:
scheduleChild.setAttribute('onClick','bookTimeslot('+id_provider+',"'+element.startTime+'")')