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

【问题标题】：Missing ( after argument list when forEach element is added in a setAttribute onClick在 setAttribute onClick 中添加 forEach 元素时缺少 ( 在参数列表之后
【发布时间】：2022-01-10 22:41:43
【问题描述】：

我正在尝试设置触发函数的 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>

【问题讨论】：

标签： javascript html foreach attributes

【解决方案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);
    }
)};

【讨论】：

好吧，我不知道最好使用事件监听器。谢谢

【解决方案2】：

错误是因为startTime的值，因为它的值包含:，所以你应该把它放在一个“”里面。喜欢：

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

【讨论】：