在 setAttribute onClick 中添加 forEach 元素时缺少 ( 在参数列表之后

Question

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 (eg 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>

Answer 1

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));

Answer 2

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+'")')