Jason: createElement und ein Funktionsproblem

Hi also...ich hab folgendes Problem:

ich hab hier dieses dokument:

<html>
<head>

<link rel="stylesheet" type="text/css" href="button.css">

<script type="text/javascript">

function button_text(text)
   {
    var new_text = document.createTextNode(text);
    document.getElementById("newText").replaceChild(new_text, document.getElementById("newText").firstChild);
   }
  function changeColor(form)
  {
   var Farbwert = "";
   Farbwert = form.FarbeLinks.options[form.FarbeLinks.selectedIndex].value;
   document.getElementById('Symbol').style.background = "Farbwert";
  }

</script>

</head>
 <body>
 <table>
   <table style="padding:0px;border-spacing;0px;margin:0px">
       <td id="Symbol" width="20%" style="padding:5px;background:#ffff00">
         &gt;
        </td>
       <td width="80%" bgcolor="#CCCCCC">
    <form id="newText">
     aendert den Text
    </form>
        </td>
   </tr>
 </form>
 </table>
    <form action="." method="get">
      <p>
        <label for="mytext">neuer Text:</label><br>
         <textarea id="mytext" rows="3" cols="20"></textarea><br>
      </p>
    </form>
  <div>
    <form onsubmit="return false;">
     <button name="mybutton" style="padding:0px">
      <table style="padding:0px;border-spacing;0px;margin:0px">
       <tr>
        <td width="20%" style="padding:5px;background-color:#ffff00">
         &gt;
        </td>
        <td width="80%">
    <form id="">
     aendert den Text
    </form>
        </td>
       </tr>
      </table>
   </button>
       <input type="button" value="kopieren" onclick="button_text(document.getElementById('mytext').value);">

</form>

<table>
 <tr>
  <td>
   <form name="Farbauswahl" id="Farbauswahl">
   <select name="FarbeLinks" size="6">
   <option value="#FF0000" selected>rote Farbe</option>
   <option value="#fefc57">gelbe Farbe</option>
   <option value="#25c30b">grüne Farbe</option>
   <option value="#000000">schwarzer Kontrast</option>
   <option value="#1e07ff">blaue Farbe</option>
   </select>
   <input type="button" value="übergabe" onclick="changeColor(this.form);"
   </form>
  <td>
 </tr>
</body>
</html>

Die Tabelle in der der Text änderbar ist und deren Farbhintergrund geändert werden soll soll einen...provisorischen button darstellen...
und darunter ist noch ein zweiter button mit dem <button> tag gemacht.

So nun mein Problem...Ich würde gerne eine Funktion schreiben.Die die Werte meiner "BEIDEN" Funktionen nimmt...und per createElement einen <button> tag erstellt...in javascript...ich bekomme das einfach nicht gebacken...Die Funktion soll sich einfach die Werte für den neuen Text und die WErte der neuen Farbe schnappen und einen <button> zusammenbauen...nicht per innerHTML...das soll reihnes javascript sein...aber wie gesagt ich kriegs nicht hin....kann mir da jemand helfen mit?wäre sehr dankbar dafür.

  1. hi,

    ich hab hier dieses dokument:

    Warum hast du darin eigentlich so viele Formulare - was hast du mit denen vor?

    So nun mein Problem...Ich würde gerne eine Funktion schreiben.Die die Werte meiner "BEIDEN" Funktionen nimmt...und per createElement einen <button> tag erstellt...in javascript...ich bekomme das einfach nicht gebacken...Die Funktion soll sich einfach die Werte für den neuen Text und die WErte der neuen Farbe schnappen und einen <button> zusammenbauen...nicht per innerHTML...das soll reihnes javascript sein...aber wie gesagt ich kriegs nicht hin....kann mir da jemand helfen mit?

    Wenn du zeigst, was du diesbezüglich bisher versucht hast.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Das Ergebniss sollte so aussehen:
      <table style="padding:0px;border-spacing;0px;margin:0px">
      <td id="Symbol" width="20%" style="padding:5px;background:#ffff00">
       &gt;
      </td>
      <td width="80%" bgcolor="#CCCCCC">
      <form id="newText">
       aendert den Text
      </form>
      </td>
      </tr>
      </table>

      Das is nur Übung...hat keine Sinn und Zweck...
      Und jetzt gleich pinkelt sich bestimmt der ein oder andere vor lachen in die Hose :P p.s. ich bin Anfänger...
      so sieht meine funktion so weit aus...

      function createButton ()
        {
         var Attribut = document.createAttribute;
         var SucheTag = document.getElementsByTagName;
         var Styles = Attribut("style");

      document.createElement("table");

      Styles.nodeValue = "padding:0px;border-spacing:0px;margin:0px";
         SucheTag("table")[0].setAttributeNode("Styles");
         SucheTag("table")[0].appendChild("tr")
         SucheTag("tr")[0].appendChild("td")
         SucheTag("tr")[0].appendChild("td")
         Styles.nodeValue = "padding:5px;background:#FFFF00"
         SucheTag("td")[0].setAttributeNode("Styles");
         document.createTextNode("")
        }

      Ja ich weis...Amateurhaft...kann mir da jemand Tipps geben oder hilfeleisten wie man das einfach...besser hinbekommt?Denn wenn ich so weitermache dann hab ich am ende nen ganz schön großen Haufen Code der wahrscheinlich auf 1/10 reduziert werden kann...Achja...es sollte doch mit dem createElement gebaut werden...

      1. so sieht meine funktion so weit aus...

        function createButton ()
          {
           var Attribut = document.createAttribute;

        Das brauchst du nicht. Alle Elemente, die du mit createElement erzeugst haben bereits die Attribute die du benötigst.

        var Styles = Attribut("style");

        vor allem das.

        D.h. dein Code funktioniert bis hierher nicht, da du ein Attribut erzeugst, dass bereits existiert und sich auch nicht überschreiben läßt, da es essentiell für HTML Elemente ist.
        Zumal du es darüber hinaus auch dem Dokument zuweist, dass damit gar nichts anfangen könnte.

        Ja ich weis...Amateurhaft...kann mir da jemand Tipps geben oder hilfeleisten wie man das einfach...besser hinbekommt?

        du versuchst zuviel. Das ganze geht in etwa so ab:

          
        var el = document.createElement('div');  
        el.style.border = '1px solid black';  
        ....  
        document.body.appendChild( div );
        

        Tabellen bergen einige Schwierigkeiten, du solltest erstmal einfach Elemente nutzen.

        Struppi.

        --
        Javascript ist toll (Perl auch!)
        1. Was macht denn das

          document.body.appendChild( div );

          am Ende

          und wenn ich z.B. eine Funktion habe wie diese hier:

          function button_text(text)
             {
              var new_text = document.createTextNode(text);
              var neuer_Text = document.getElementById("newText").replaceChild(new_text, document.getElementById("newText").firstChild);
             }

          <table style="padding:0px;border-spacing;0px;margin:0px"><td id="Symbol" width="20%" style="padding:5px;background:#ffff00">
           &gt;
           </td>
          <td width="80%" bgcolor="#CCCCCC">
          <form id="newText">
          aendert den Text
          </form>
          <form action="." method="get">
          <p>
          <label for="mytext">neuer Text:</label><br>
          <textarea id="mytext" rows="3" cols="20"></textarea><br>
          </p>
          <input type="button" value="kopieren" onclick="button_text(document.getElementById('mytext').value);">
          </form>
          </td>
          </tr>
          </table>

          1. Hab ausversehn gleich gepostet...was ich weiter sagen wollte war...wenn ich diese funktion dann habe...Wie übergebe ich aus der funktion Werte an eine ander Funktion um dann in dieser wiederrum die übergebenen Werte als attribute einzusetzen?

            1. hi,

              wenn ich diese funktion dann habe...Wie übergebe ich aus der funktion Werte an eine ander Funktion um dann in dieser wiederrum die übergebenen Werte als attribute einzusetzen?

              Möchtest du dich mal grundlegend über den Umgang mit Funktionen in Javascript informieren?

              gruß,
              wahsaga

              --
              /voodoo.css:
              #GeorgeWBush { position:absolute; bottom:-6ft; }
              1. Ok das hat geholfen danke vielmals :)

      2. Hi,

        document.createElement("table");
           SucheTag("table")[0].appendChild("tr")

        tr ist kein direktes Kind von table, da fehlt thead, tfoot oder tbody dazwischen.

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hallo MudGuard.

          document.createElement("table");
             SucheTag("table")[0].appendChild("tr")

          tr ist kein direktes Kind von table, da fehlt thead, tfoot oder tbody dazwischen.

          Und deshalb rate ich auch immer wieder zur Nutzung von insertRow sowie insertCell.

          Einen schönen Montag noch.

          Gruß, Mathias

          --
          ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
          debian/rules
          1. Hi,

            Und deshalb rate ich auch immer wieder zur Nutzung von insertRow

            wobei hier natürlich gewisse Einschränkungen vorliegen - z.B. wenn die als Parameter angegebene Zeile z.B. die erste Zeile eines tfoot oder tbody ist, die neue Zeile jedoch die letzte Zeile des thead bzw. des vorherigen tbody sein soll ...

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            Schreinerei Waechter
            O o ostern ...
            Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
            1. Hallo MudGuard.

              Und deshalb rate ich auch immer wieder zur Nutzung von insertRow

              wobei hier natürlich gewisse Einschränkungen vorliegen - z.B. wenn die als Parameter angegebene Zeile z.B. die erste Zeile eines tfoot oder tbody ist, die neue Zeile jedoch die letzte Zeile des thead bzw. des vorherigen tbody sein soll ...

              Hm, wie? Ich kann mir gerade nicht so recht vorstellen, was hier das Problem sein sollte. Denn tHead und tFoot sind vom Typ HTMLTableSectionElement, was seinerseits wiederum über eine insertRow-Methode verfügt. Eine präzisere Platzierung von Zeilen ist hier also Problemlos möglich.

              Solltest du etwas Anderes gemeint haben, solltest du dies bitte näher erläutern.

              Einen schönen Montag noch.

              Gruß, Mathias

              --
              ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
              debian/rules
              1. Hi,

                Hm, wie? Ich kann mir gerade nicht so recht vorstellen, was hier das Problem sein sollte. Denn tHead und tFoot sind vom Typ HTMLTableSectionElement, was seinerseits wiederum über eine insertRow-Methode verfügt.

                Davon hattest Du nichts erwähnt. Mit der ursprünglich von Dir verlinkten Methode (insertRow im TableElement-Interface) wäre es nicht möglich ...

                cu,
                Andreas

                --
                Warum nennt sich Andreas hier MudGuard?
                Schreinerei Waechter
                O o ostern ...
                Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
                1. Hallo MudGuard.

                  Hm, wie? Ich kann mir gerade nicht so recht vorstellen, was hier das Problem sein sollte. Denn tHead und tFoot sind vom Typ HTMLTableSectionElement, was seinerseits wiederum über eine insertRow-Methode verfügt.

                  Davon hattest Du nichts erwähnt.

                  Gut, wenn du wieder in der Nähe bist, verlinke ich insertRow, insertRow sowie insertRow.

                  Mit der ursprünglich von Dir verlinkten Methode (insertRow im TableElement-Interface) wäre es nicht möglich ...

                  Kein Zweifel. Hatte ich aber auch nicht behauptet.

                  Einen schönen Montag noch.

                  Gruß, Mathias

                  --
                  ie:% fl:| br:< va:) ls:& fo:) rl:( n4:~ ss:) de:] js:| mo:| zu:)
                  debian/rules