如何在Javascript中的document.write中執行onclick事件？

-2

晚上好！如何在Javascript中的document.write中執行onclick事件？

我正在爲學校作業製作一個Javascript自動生成日曆。基本創作已成功，但下一項任務是能夠通過按「日」將約會添加到日曆中。

這是我的問題開始的地方。我做了一個簡單的函數，並嘗試將該函數添加爲正在生成的元素的onclick事件，如您在下面的代碼中所見。

問題是，當我點擊一個元素時，沒有任何反應！我嘗試使用像alert這樣的虛擬函數（「它工作」），但仍然沒有結果。

任何人都可以幫我解決這個問題嗎？

我的代碼：

HTML

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script src="kalender.js"></script> 
    <title>Auto-gen kalender</title> 

    <style type="text/css"> 
     .td, tr 
     { 
      border-color: red; 
      border-width: 5px; 
      font-family:'Bookman Old Style'; 
     } 

     .table 
     { 
      background-color: grey; 
      color: darkred; 
     } 

     .body 
     { 
      background-color: lightgray; 
     } 


    </style> 
</head> 
<body> 
</body> 
</html>

的Javascript：

// HOW 
function MaakAfspraak() { 
    alert("afspraak gemaakt"); 
} 

function Dag_Titel(dag_naam) 
{ 
    document.write("<td width=40>" + dag_naam + "</td>"); 
} 

function VulTabel(maand, maand_length) 
{ 
    dag = 1; 
    //beginnen met tabel + berg vars, dag hieboven is belangrijk 
    document.write("<table border=5 cellspacing=3 cellpadding=%3><tr>"); 
    document.write("<td align=center colspan=7><b>" + maand + " " + jaar + "</b><tr>"); 
    Dag_Titel("Zo"); 
    Dag_Titel("Ma"); 
    Dag_Titel("Di"); 
    Dag_Titel("Wo"); 
    Dag_Titel("Do"); 
    Dag_Titel("Vr"); 
    Dag_Titel("Za"); 

    // dit zijn de lege cellen voor het begin van een maand 
    document.write("</tr><tr>") 
    for (var i=1; i<start_dag; i++) 
    { 
     document.write("<td onclick=´MaakAfspraak()´>"); 
    } 

    // 1ste week van een maand 
    for (var i=start_dag; i < 8; i++) 
    { 
     document.write("<td align=center onclick=´MaakAfspraak()´>" + dag + "</td>"); 
     dag++; 
    } 

    document.write("<tr>"); 

    // rest van de weken 
    while (dag <= maand_length) 
    { 
     for (var i = 1; i <= 7 && dag <= maand_length; i++) 
     { 
      document.write("<td align=center onclick=´MaakAfspraak()´>" + dag + "</td>"); 
      dag++; 
     } 
     document.write("</tr><tr>") 
     // hieronder de 1ste dag voor de volgende maand zodat we alles kunnen vullen 
     start_dag = i; 
    } 
    document.write("</tr></table></ br>") 
} 

// eerste dag van nieuwe jaar en meer shiz 
jaar = 2014; 
vandaag = new Date("Januari 1, " + 2014) 
start_dag = vandaag.getDay() + 1; 
VulTabel("Januari", 31); 
VulTabel("Februari", 29); 
VulTabel("Maart", 31); 
VulTabel("April", 30); 
VulTabel("Mei", 31); 
VulTabel("Juni", 30); 
VulTabel("Juli", 31); 
VulTabel("Augustus", 31); 
VulTabel("September", 30); 
VulTabel("Oktober", 31); 
VulTabel("November", 30); 
VulTabel("December", 31); 


//end

來源

2014-10-16 Robert Kraaijeveld

您可以使用jQuery嗎？ – starvator 2014-10-16 19:18:53

嘗試使用.innerHTML輸入文本而不是document.write（）。 – 2014-10-16 19:20:14

您的td onclick屬性中的引號不是引號。 – 2014-10-16 19:20:55

原來我用錯了類型qoutes爲我的onclick函數調用。謝謝@KevinB！

來源

2014-10-16 19:23:34

是的，但你不應該這樣創建元素。看到我的答案。 – 2014-10-16 19:25:02

請勿使用document.write。相反，使用DOM（其速度更快）創建元素，然後通過addEventListener添加事件：

//Create it 
var td = document.createElement("td"); 

//Add to tr 
tr.appendChild(td); 

//Add event 
td.addEventListener("click", MaakAfspraak, false);

來源

2014-10-16 19:24:24

如何在Javascript中的document.write中執行onclick事件？

回答

相關問題