JavaScript onclick函数调用不起作用

Question

text += "<button id=next onclick=calendar(nextDate)>"
text += "<button id=next onclick=calendar(prevDate)>"

此代码似乎无法正常运行。 我不知道问题是什么。

function calendar(date) {  

    ...........

    text += "<tr>"
    text += "<td colspan=7>"
    text += "<button id=prev onclick=calendar(prevDate)>"
    text += "◀"
    text += "</button>"

    text += "<button id=next onclick=calendar(nextDate)>"
    text += "▶"
    text += "</button>"
    text += "</tr>"
    text += "</td>"

    text += "</table>";

    document.getElementById("cal").innerHTML = text;

}

calendar();

Answer 1

假设您已将onClick函数设置为此函数，则在行的末尾缺少分号＆＃34;;＆＃34;

Answer 2

问题

text += "<button id=prev onclick=calendar(prevDate)>"
text += "<button id=next onclick=calendar(nextDate)>"

• 您不使用引号括起属性值
• 您传递字符串prevDate和nextDate而不是它们的值，但由于它们没有任何引号，javascript会尝试找到这两个变量，但它不会能够（除非他们在全球范围内）
• 你不要使用任何分号(;)，这可能不会引起问题，但使用它们仍然是个好主意

以下几种方法可以让您正确传递上一个和下一个日期：

• 字符串连接
• 插值
• 活动听众

字符串连接

text += "<button id='prev' onclick='calendar(" + prevDate + ")'>";
text += "<button id='next' onclick='calendar(" + nextDate + ")'>";

插值（ES6）

text += `<button id="prev" onclick="calendar('${prevDate}')">`;
text += `<button id="next" onclick="calendar('${nextDate}')">`;

事件监听器

text += "<button id='prev'>";
text += "<button id='next'>";

// This goes after document.getElementById("cal").innerHTML = text;
document.getElementById("prev").addEventListener("click", function (event) {
    calendar(prevDate);
});

document.getElementById("next").addEventListener("click", function (event) {
    calendar(nextDate);
});