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
– Ian Hazzard, Commented Oct 16, 2014 at 19:20
@KevinB Well I'll be darned... turns out that is indeed the problem.. thank you for your time ;) — Robert Kraaijeveld
– Robert Kraaijeveld, Commented Oct 16, 2014 at 19:22

Robert Kraaijeveld · Accepted Answer · 2014-10-16 19:23:34Z

0

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

answered Oct 16, 2014 at 19:23

Robert Kraaijeveld

6951 gold badge6 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Don Rhummy Over a year ago

yes, but you shouldn't be creating elements this way. see my answer.

Don Rhummy · Accepted Answer · 2014-10-16 19:24:24Z

0

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

answered Oct 16, 2014 at 19:24

Don Rhummy

26.1k53 gold badges197 silver badges364 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related