Блог

Я пытаюсь установить атрибут onclick, запускающий функцию, и передать параметры в этой функции. Некоторые параметры поступают непосредственно из элемента моего массива, в котором я создаю кнопку, в которой я хочу создать новый атрибут по щелчку. Как только я использую атрибут элемента (например, element.startTime), я получаю ошибку «Неперехваченная синтаксическая ошибка: отсутствует ) после списка аргументов».

Что я делаю не так?

Вот мой код :

 if(days[day]) {  days[day].forEach(  (element) =gt; {  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-код кнопки, которую я создаю :

 lt;div class="btn btn-link text-center schedulesTime" data-address="3" data-starttime="09:00" data-endtime="09:45" onclick="bookTimeslot(3,09:00)"gt;09:00-09:45lt;/divgt;  

Не пытайтесь создавать такие строки кода. Вместо этого назначьте фактическую функцию (или, еще лучше, используйте addEventListener ):

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

Наиболее вероятной проблемой в данном конкретном случае является отсутствие кавычек вокруг строки даты, но, опять же, построение строк кода подвержено ошибкам и не является необходимым.

Примечание: При этом будет использоваться значение по element.startTime состоянию на момент щелчка. Если возможно, что элемент может измениться, и вы хотите использовать предыдущее значение, возьмите его локально:

 const startTime = new Date( element.startTime); // If it's a `Date` scheduleChild.addEventListener("click", () =gt; 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) =gt; {  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", () =gt; bookTimeslot(id_provider, element.startTime));   dayParent.appendChild(scheduleChild);  } )};  

Ошибка связана со значением startTime, так как оно содержит : , поэтому вы должны поместить его в «». Нравится:

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