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函數設置為此功能，則在行“;”的末尾缺少分號。

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