Missing ( after argument list when forEach element is added in a setAttribute onClick

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

09:00-09:45

user_157247 · Answer

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

user_11977929 · Answer

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

Missing ( after argument list when forEach element is added in a setAttribute onClick

2 Answers