How do I execute an onclick event within document.write in Javascript?

Question

Good evening!

I am making a Javascript auto-generated calendar for a school assignment. The basic creation has succeeded, but the next assignment is to be able to add appointments into the calendar by pressing a "day".

This is where my problem starts. I made a simple function and tried adding that function as an onclick event to my elements being generated, as you can see in my code below.

Problem is that when I click an element, nothing happens! I tried using a dummy function like alert("it worked"), but still no result.

Can anyone help me with this question?

My code:

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

Try using .innerHTML to input text instead of document.write(). — Ian Hazzard, Oct 16 '14 at 19:20
@KevinB Well I'll be darned... turns out that is indeed the problem.. thank you for your time ;) — Robert Kraaijeveld, Oct 16 '14 at 19:22
take a look at [this post](http://stackoverflow.com/questions/5578259/jquery-ui-datepicker-how-to-add-clickable-events-on-particular-dates) — starvator, Oct 16 '14 at 19:24

score 0 · Answer 1 · answered Oct 16 '14 at 19:23

0

Turns out I was using the wrong type of qoutes for my onclick function call. Thanks @KevinB!

answered Oct 16 '14 at 19:23

Robert Kraaijeveld

687
1
6
14

1

yes, but you shouldn't be creating elements this way. see my answer. – Don Rhummy Oct 16 '14 at 19:25

score 0 · Answer 2 · answered Oct 16 '14 at 19:24

Don't use document.write. Instead, create your elements using the DOM (which is much faster) and then add the event via addEventListener:

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

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

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

How do I execute an onclick event within document.write in Javascript?

2 Answers2