如何在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事件？

回答

相关问题