DOM plz help noob hier

Diskutiere DOM plz help noob hier im Für Verirrte - Fragen zu JavaScript Forum; Hi leute, wäre super nice wenn Ihr mir helfen könntet bei der Aufgabe. Aufgabe1 Erzeuge mit Hilfe einer Schleife folgenden Text: Absatz 1 Absatz 2...

  1. therealduck
    therealduck Guest
    Hi leute,
    wäre super nice wenn Ihr mir helfen könntet bei der Aufgabe.
    Aufgabe1

    Erzeuge mit Hilfe einer Schleife folgenden Text:
    Absatz 1
    Absatz 2
    Absatz 3
    Absatz 4
    Absatz 5
    Absatz 6
    Absatz 7
    Absatz 8
    Absatz 9
    Absatz 10
    Absatz 11
    Absatz 12
    Dabei soll jeder Absatz ein eigenes p(<p>…</p>) sein.

    Aufgabe 2
    Nimm die obige Aufgabe und ergänze sie um einen Button. Nachdem der Button geklickt worden ist, soll jeder zweite Absatz fett sein.
    Absatz 1
    Absatz 2
    Absatz 3
    Absatz 4
    Absatz 5
    Absatz 6
    Absatz 7
    Absatz 8
    Absatz 9
    Absatz 10
    Absatz 11
    Absatz 12
     
  2. Vielleicht hilft dir dieses Training hier weiter.
  3. therealduck
    therealduck Guest
    mein Code zurzeit allerdings ist es nicht in einer Schleife weil kp wie ich es machen soll und es wird halt nur ein Absatz fett anstatt jeder 2te :/
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>DOM</title>
    <script>
    function bold() {

    var absatz = document.getElementById("a2");
    var bold = document.createElement("b");
    var replace = absatz.replaceChild(bold, absatz.firstChild);
    bold.appendChild(replace);
    }
    </script>
    </head>
    <body>
    <p id="a1">Absatz 1</p>
    <p id="a2">Absatz 2</p>
    <p id="a3">Absatz 3</p>
    <p id="a4">Absatz 4</P>
    <p id="a5">Absatz 5</p>
    <p id="a6">Absatz 6</p>
    <p id="a7">Absatz 7</p>
    <p id="a8">Absatz 8</p>
    <p id="a9">Absatz 9</p>
    <p id="a10">Absatz 10</p>
    <p id="a11">Absatz 11</p>
    <p id="a12">Absatz 12</p>
    <p><input id="idBold" type="button" value="bold">
    <script>
    document.getElementById("idBold")
    .addEventListener("click", bold);
    </script>
    </body>
    </html>
     
  4. Robat
    Robat Bekanntes Mitglied
    Die Schleife kannst du in Verbindung mit document.write(..) nutzen. Das einzige was sich bei den Paragraphen unterscheidet ist jeweils die Nummer 1-12. Mit einer Schleife kannst du also über diese Nummern iterieren und mit document.write() kannst du den Paragraphen dann ausgeben.

    Kleines Beispiel für document.write
    Code (Javascript):

    let index = 42;
    document.write('<p>Absatz ' + index + '</p>');  // generiert einen Paragraphen mit dem Text Absatz 42
     
    Das mit dem bold-Effekt kriegst du auch wieder mit einer Schleife hin.
    Es gibt die Methode document.getElementsByTagName(..) welche dir alle Elemente im DOM-Baum mit diesem Tag in einem Array wiedergibt. Das kannst du nutzen um dir alle p Elemente zu holen.
    Über dieses Array kannst du dann mit einer Schleife iterieren und bspw über style.fontWeight = "bold" jedes zweite Element fett drucken.

    Beispiel
    Code (Javascript):

    const pElements = document.getElementsByTagName('p');
    pElements[0].style.fontWeight = "bold";
     
     
    code_solution gefällt das.
  5. httpdigest
    httpdigest Aktives Mitglied
    Alternativ auch die etwas umständlichere Variante über die DOM API createElement, appendChild, createTextNode (entsprechend in einer Schleife):
    Code (Javascript):
    var p = document.createElement("p");
    p.appendChild(document.createTextNode("Absatz " + i));
    container.appendChild(p);
    Wobei container dann das Element/Node ist, in welchem die Paragraph-Elemente als Kindelemente eingefügt werden sollen, und 'i' der entsprechende Index.

    Und zum Selektieren jedes zweiten Paragraph-Elementes könntest du auch CSS-Selektoren nehmen:
    Code (Javascript):
    document.querySelectorAll("#container > p:nth-child(even)")
    Das liefert dir dann ein Array mit den selektierten DOM-Nodes, wobei die Paragraph-Elemente Kindelemente eines Elementes mit id="container" wären.

    Gibt viele Möglichkeiten. :)
     
    Zuletzt bearbeitet: 25. Juni 2018
  6. therealduck
    therealduck Guest
    Vielen Dank für die schnelle Antwort, Ihr habt mir aufjedenfall schon weiter geholfen, allerdings hapert es jetzt bei mir beim gewünschten Button und die dazugehörige Funktion, "Nimm die obige Aufgabe und ergänze sie um einen Button. Nachdem der Button geklickt worden ist, soll jeder zweite Absatz fett sein."
     
  7. httpdigest
    httpdigest Aktives Mitglied
    Ich würd's so lösen:
    Code (HTML5):
    <input type="button" onclick="makeBold()">Bold</input>
    Und dann entsprechend eben eine function makeBold() in einem script Tag implementieren.
     
  8. therealduck
    therealduck Guest
    -
     
    Zuletzt von einem Moderator bearbeitet: 25. Juni 2018
  9. mihe7
    mihe7 Bekanntes Mitglied
    Code (Javascript):

    <body>
      <input type="button" onclick="jederZweiteAbsatzFett()" value="Fett" />

      <script>
        function schreibeAbsaetze(n) {
            for (var i = 0; i < n; i++) {
                document.write('<p>Absatz ' + (i+1) + '</p>');
            }
        }

        function jederZweiteAbsatzFett() {
            var nodeList = document.getElementsByTagName("p");
            for (var i = 1; i < nodeList.length; i+=2) {
                nodeList[i].style.fontWeight = "bold";
            }
        }

        schreibeAbsaetze(12);
      </script>
    </body>
     
     
    code_solution gefällt das.
  10. Wenn du Java lernen möchtest, empfehlen wir dir diese Online-Training hier
Die Seite wird geladen...

DOM plz help noob hier - Ähnliche Themen

Database Helper Klasse mit Consumer
Database Helper Klasse mit Consumer im Forum Datenbankprogrammierung
Choicebox Helperclass in seperaten Package
Choicebox Helperclass in seperaten Package im Forum AWT, Swing, JavaFX & SWT
Hi I need help
Hi I need help im Forum Mobile Geräte
Chat #Helper for website
Chat #Helper for website im Forum Private Stellangebote und Stellensuche von Usern
java(tm) plug-in ssv helper
java(tm) plug-in ssv helper im Forum Allgemeine Java-Themen
Thema: DOM plz help noob hier