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

Question

我正在尝试设置触发函数的 onclick 属性并在该函数中传递参数。一些参数直接来自我的数组元素，我在其中生成我想在其中创建新属性的按钮。一旦我使用元素属性（例如 element.startTime），我就会在参数列表后收到错误“Uncaught SyntaxError: missing )”。

我做错了什么？

这是我的代码：

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)

                    }
                )}

按钮的创建工作正常，我可以看到我的按钮中设置了 onclick 属性。例如，我创建的按钮的 HTML :

<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

不要尝试构建那样的代码字符串。相反，分配一个实际函数（或者更好的是，使用 addEventListener）：

scheduleChild.addEventListener("click", () => bookTimeslot(id_provider, element.startTime));

在这种特定情况下，最可能的问题是日期字符串周围缺少引号，但同样，构建代码字符串容易出错且不必要。

注意：这将使用点击发生时 element.startTime 的值。如果元素可能会发生变化，并且您希望使用以前的值，请在本地获取它：

const startTime = new Date(+element.startTime); // If it's a `Date`
scheduleChild.addEventListener("click", () => bookTimeslot(id_provider, startTime));

旁注：您不必直接创建属性节点，可以使用setAttribute。所以这个：

var address = document.createAttribute("data-address")
address.value = element.address
scheduleChild.setAttributeNode(address)

变成

scheduleChild.setAttribute("data-address", element.address);

旁注 2：您使用的是箭头函数，很明显您处于 ES2015+ 环境中。 var 已被有效弃用，通常我推荐 let 或 const。

有了这些变化：

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

Answer 2

错误是因为 startTime 的值，因为它的值包含 : ，所以你应该把它放在 """ .喜欢：

scheduleChild.setAttribute('onClick','bookTimeslot('+id_provider+',"'+element.startTime+'")')

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

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

javascript

html

foreach

attributes