Event Handler (DOM) |
Event Handler (DOM) |
GoldencoldLP |
May 8 2016, 09:40 AM
Post
#1
|
Group: Members Posts: 1 Joined: 8-May 16 Member No.: 24,230 |
Hey guys!
I am pretty new to javascript and need to make a website with an Event Handler. The website is complete but without Event Handler. It should load the Event Handler when the DOM structure is loaded or something like this. The code I have is: CODE <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style> #hour{color:black; font-size: 48px;} #min{color:blue; font-size: 48px;} #sec{color:red; font-size: 48px;} </style> <script type="text/javascript"> var timerId; window.onload = function clockStart() { if (timerId) return timerId = setInterval(update, 1000) update() } var a = new Array(50); var i,j; var anz = 0; var bool, at, sor; for(i=0; i< 50; i++) { a[i] = new Object(); a[i]["name"] = ""; a[i]["nachname"] = ""; a[i]["plz"] = ""; a[i]["ort"] = ""; a[i]["email"] = ""; a[i]["altergeb"] = ""; a[i]["geburt"] = ""; } function update() { var date = new Date() var hours = date.getHours() if (hours < 10) hours = '0'+hours document.getElementById('hour').innerHTML = hours var minutes = date.getMinutes() if (minutes < 10) minutes = '0'+minutes document.getElementById('min').innerHTML = minutes var seconds = date.getSeconds() if (seconds < 10) seconds = '0'+seconds document.getElementById('sec').innerHTML = seconds } function editrow(b) { document.getElementById("name").value = a[b]["name"]; document.getElementById("nachname").value = a[b]["nachname"]; document.getElementById("plz").value = a[b]["plz"]; document.getElementById("ort").value = a[b]["ort"]; document.getElementById("email").value = a[b]["email"]; var geburtsdatum = toDate(a[b]["geburt"]); document.getElementById("geburt").value = geburtsdatum; deleterow(b); } function deleterow(d) { a.splice(d,1); anz--; append(-1); } function sort(x) { var obj; var b; if (x == 1) { obj = "name"; } if (x == 2) { obj = "plz"; } if (x == 3) { obj = "datum"; } if (x == 4) { obj = "nachname"; } if (x == 5) { obj = "ort"; } if (x == 6) { obj = "altergeb"; } if (x == 7) { obj = "geburt"; } if (x == 8) { obj = "email"; } for (i = anz - 1; i > 0; i--) { for (j = 0; j < i; j++) { if (a[j][obj] > a[j + 1][obj]) { b = a[j]; a[j] = a[j + 1]; a[j + 1] = b; } } } append(0); } function append(x, altergeb) { var j; for (j = 0; j <= (anz - x); j++) { if (j != 0) document.getElementById("Tabelle").deleteRow(1); } for (j = 0; j < anz; j++) { var TR = document.getElementById("Tabelle").insertRow(j + 1); var TD1 = document.createElement("td"); var TD1name = document.createTextNode(a[j]["name"]); TD1.appendChild(TD1name); var TD7 = document.createElement("td"); var TD7nachname = document.createTextNode(a[j]["nachname"]); TD7.appendChild(TD7nachname); var TD2 = document.createElement("td"); var TD2plz = document.createTextNode(a[j]["plz"]); TD2.appendChild(TD2plz); var TD8 = document.createElement("td"); var TD8ort = document.createTextNode(a[j]["ort"]); TD8.appendChild(TD8ort); var TD3 = document.createElement("td"); var TD3email = document.createTextNode(a[j]["email"]); TD3.appendChild(TD3email); var TD4 = document.createElement("td"); var TD4date = document.createTextNode(a[j]["datum"]); TD4.appendChild(TD4date); var TD9 = document.createElement("td"); var TD9altergeb = document.createTextNode(a[j]["altergeb"]); TD9.appendChild(TD9altergeb); var TD10 = document.createElement("td"); var TD10geburt = document.createTextNode(a[j]["geburt"]); TD10.appendChild(TD10geburt); var TD5 = document.createElement("td"); var delbild = new Image(); delbild.src = "./images/delete.gif"; delbild.setAttribute("onclick", "java script:deleterow(" + (j) + ")"); TD5.appendChild(delbild); var TD6 = document.createElement("td"); var beabild = new Image(); beabild.src = "./images/edit.jpg"; beabild.setAttribute("onclick", "java script:editrow(" + (j) + ")"); TD6.appendChild(beabild); TR.appendChild(TD1); TR.appendChild(TD7); TR.appendChild(TD2); TR.appendChild(TD8); TR.appendChild(TD3); TR.appendChild(TD4); TR.appendChild(TD9); TR.appendChild(TD10); TR.appendChild(TD5); TR.appendChild(TD6); } } function save() { bool = 1; if (document.getElementById("name").value.length < 2) { if (document.getElementById("name").value.length == 0) { document.getElementById("namef").firstChild.nodeValue = "Kein Vorname!!!"; bool = 0; } else { document.getElementById("namef").firstChild.nodeValue = "Zu Kurz!!!"; bool = 0; } } else { document.getElementById("namef").firstChild.nodeValue = " "; } if (document.getElementById("nachname").value.length < 3) { if (document.getElementById("nachname").value.length == 0) { document.getElementById("nachnamef").firstChild.nodeValue = "Kein Nachname!!!"; bool = 0; } else { document.getElementById("nachnamef").firstChild.nodeValue = "Zu Kurz!!!"; bool = 0; } } else { document.getElementById("nachnamef").firstChild.nodeValue = " "; } if (document.getElementById("plz").value.length < 4 || document.getElementById("plz").value.length > 4 || document.getElementById("plz").value == "" || isNaN(document.getElementById("plz").value)) { document.getElementById("plzf").firstChild.nodeValue = "Keine PLZ!!!"; bool = 0; } else { document.getElementById("plzf").firstChild.nodeValue = " "; } if (document.getElementById("ort").value.length < 2) { if (document.getElementById("ort").value.length == 0) { document.getElementById("ortf").firstChild.nodeValue = "Kein Ort!!!"; bool = 0; } else { document.getElementById("ortf").firstChild.nodeValue = "Zu Kurz!!!"; bool = 0; } } else { document.getElementById("ortf").firstChild.nodeValue = " "; } at = 0; for (i = 1; i < document.getElementById("email").value.length - 1 && at == 0; i++) { if (document.getElementById("email").value.charAt(i) == '@') at = 1; } if (at == 0) { document.getElementById("emailf").firstChild.nodeValue = "Keine E-Mail Adresse!!!"; bool = 0; } else { document.getElementById("emailf").firstChild.nodeValue = " "; } var geburtbool = true; var altergeb = 0; var G_datum = document.getElementById("geburt").value; var G_date = G_datum.split("-"); var G_tag = parseInt(G_date[2]); var G_monat = parseInt(G_date[1]); var G_jahr = parseInt(G_date[0]); var H_datum = new Date(); var H_tag = parseInt(H_datum.getDate()); var H_monat = (parseInt(H_datum.getMonth()) + 1); var H_jahr = (parseInt(H_datum.getYear()) + 1900); if(isNaN(G_jahr) == true || isNaN(G_monat) == true || isNaN(G_tag) == true || isNaN(H_jahr) == true || isNaN(H_monat) == true || isNaN(H_tag) == true) { document.getElementById("geburtf").firstChild.nodeValue = "Falsches Geburtsdatum!"; bool = 0; geburtbool = false; } else { document.getElementById("geburtf").firstChild.nodeValue = " "; geburtbool = true; } if(G_jahr >= H_jahr || geburtbool == false) { if(G_monat >= H_monat || geburtbool == false) { if(G_tag > H_tag || geburtbool == false) { document.getElementById("geburtf").firstChild.nodeValue = "Falsches Geburtsdatum!"; bool = 0; } else { document.getElementById("geburtf").firstChild.nodeValue = " "; geburtbool = true; } } else { document.getElementById("geburtf").firstChild.nodeValue = " "; geburtbool = true; } } else { document.getElementById("geburtf").firstChild.nodeValue = " "; geburtbool = true; } altergeb = H_jahr - G_jahr; if(G_monat > H_monat) { altergeb = altergeb - 1; } else if(G_monat == H_monat) { if(G_tag > H_tag) { altergeb = altergeb - 1; } } if (bool == 1 && geburtbool == true) { a[anz]["name"] = document.getElementById("name").value; a[anz]["nachname"] = document.getElementById("nachname").value; a[anz]["plz"] = document.getElementById("plz").value; a[anz]["ort"] = document.getElementById("ort").value; a[anz]["email"] = document.getElementById("email").value; a[anz]["altergeb"] = altergeb; a[anz]["geburt"] = G_tag + "." + G_monat + "." + G_jahr; a[anz]["datum"] = H_tag + "." + H_monat + "." + H_jahr + " " + H_datum.getHours() + ":" + (H_datum.getMinutes() < 10 ? '0' : '') + H_datum.getMinutes() + ":" + (H_datum.getSeconds() < 10 ? '0' : '') + H_datum.getSeconds(); anz++; append(1, altergeb); document.getElementById("name").value = ""; document.getElementById("nachname").value = ""; document.getElementById("plz").value = ""; document.getElementById("ort").value = ""; document.getElementById("email").value = ""; document.getElementById("geburt").value = ""; } } </script> <title> Formular </title> </head> <body> <div id="clock" style="text-align: right;"> <span id="hour">HH</span>:<span id="min">MM</span>:<span id="sec">SS</span> </div> <form> <table> <tr> <td> Name: </td> <td><input id="name" type="text"></td> <td id="namef" style="color:red;"> </td> </tr> <tr> <td> Nachname: </td> <td><input id="nachname" type="text"></td> <td id="nachnamef" style="color:red;"> </td> </tr> <tr> <td>PLZ:</td> <td><input id="plz" type="text" ></td> <td id="plzf" style="color:red;"> </td> </tr> <tr> <td> Ort: </td> <td><input id="ort" type="text"></td> <td id="ortf" style="color:red;"> </td> </tr> <tr> <td>E-mail:</td> <td><input id="email" type="text" ></td> <td id="emailf" style="color:red;"> </td> </tr> <tr> <td>Geburtsdatum</td> <td><input id="geburt" type="date"</td> <td id="geburtf" style="color:red;"> </td> <tr> <td><input type="button" value="save" onclick="java script:save()" ></td> </tr> </table> </form> <table id="Tabelle" border="2"> <tr> <td>Name</td><td>Nachname</td><td>PLZ</td><td>Ort</td><td>E-mail</td><td>Zeitpunkt</td><td>Alter</td><td>Geburtsdatum</td><td><img src="./images/delete.gif"></td><td><img src="./images/edit.jpg"></td> </tr> </table> <br> Sortieren nach: <input type="radio" Name="sort" onclick="java script:sort(1);"> Vorname <input type="radio" Name="sort" onclick="java script:sort(4);"> Nachname <input type="radio" Name="sort" onclick="java script:sort(2);"> PLZ <input type="radio" Name="sort" onclick="java script:sort(5);"> Ort <input type="radio" Name="sort" onclick="java script:sort(3);"> Zeit <input type="radio" Name="sort" onclick="java script:sort(6);"> Alter <input type="radio" Name="sort" onclick="java script:sort(7);"> Geburtsdatum <input type="radio" Name="sort" onclick="java script:sort(8);"> E-Mail </body> </html> Please help me. I don't know how to do this! |
Christian J |
May 8 2016, 01:10 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
Maybe you're thinking of the DOMContentLoaded event:
https://developer.mozilla.org/en-US/docs/We...OMContentLoaded http://javascript.info/tutorial/onload-ondomcontentloaded Use it (in addEventListener) instead of the current code example's window.onload. |
Lo-Fi Version | Time is now: 30th March 2024 - 01:25 AM |