The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Event Handler (DOM)
GoldencoldLP
post 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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 30th March 2024 - 01:25 AM