如何在innerHTML onclick事件中动态传递字符串参数

Question

I am trying to parse a date parameter in a function name select_day. That function is declared in for a li element onclick event. with the below code I am getting this error:

Uncaught SyntaxError: missing ) after argument list

it's actually a date that I am trying to pass. I have tried hard coding the parameter, its working but dynamically it's not working

if(selected_day == dates[i]){
             $(".dates_list").append( "<li class='active' onclick=\'select_day("+$.datepicker.formatDate( "dd M", dates[i])+")\'><span>Day "+day_count+"</span><p>"+$.datepicker.formatDate( "dd M", dates[i]) +"</p></li>" );
        }

I want that function to be executed. Could anyone help please

Answer 1

Use an .on('click' handler instead of trying to concatenate the Javascript code to be executed into an onclick inline handler:

if(selected_day == dates[i]){
  const $li = $(`<li class="active"><span>Day ${day_count}</span><p>${$.datepicker.formatDate( "dd M", dates[i])}</p></li>`);
  $li.on('click', () => {
    select_day($.datepicker.formatDate("dd M", dates[i]));
  });
  $(".dates_list").append($li);
}

Or, more concisely:

if(selected_day == dates[i]){
  const formattedDate = $.datepicker.formatDate( "dd M", dates[i]);
  $(`<li class="active"><span>Day ${day_count}</span><p>${formattedDate}</p></li>`)
    .on('click', () => {
      select_day(formattedDate, dates[i]);
    })
    .appendTo('.dates_list');
}

Handlers attached with Javascript are generally a lot easier to manage than on- attribute strings.

Answer 2

Your problem is the missing of opening and closing quotes.

I recommend you event-delegation for doing this as well as to embrace the binding of events rather than putting events directly into the markup.

Likewise, you can use the data attribute to store the dates. Further, I added the class date-list in order to identify those elements li .

if (selected_day === dates[i]) {
    let html = "<li data-date='" + $.datepicker.formatDate("dd M", dates[i]) + "' class='date-list active'><span>Day " + day_count + "</span><p>" + $.datepicker.formatDate("dd M", dates[i]) + "</p></li>";
    $(".dates_list").append(html);
}

// Place this in somewhere different than the previous code-snippet 
// and execute it after the DOM is totally loaded
$('.dates_list').on("click", ".date-list", function() {
    select_day(this.data("date"));
});