# DOM plz help noob hier



## therealduck (25. Jun 2018)

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*


----------



## therealduck (25. Jun 2018)

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>


----------



## Robat (25. Jun 2018)

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`

```
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

```
const pElements = document.getElementsByTagName('p');
pElements[0].style.fontWeight = "bold";
```


----------



## httpdigest (25. Jun 2018)

Alternativ auch die etwas umständlichere Variante über die DOM API createElement, appendChild, createTextNode (entsprechend in einer Schleife):

```
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:

```
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.


----------



## therealduck (25. Jun 2018)

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."


----------



## httpdigest (25. Jun 2018)

Ich würd's so lösen:

```
<input type="button" onclick="makeBold()">Bold</input>
```
Und dann entsprechend eben eine function makeBold() in einem script Tag implementieren.


----------



## therealduck (25. Jun 2018)

-


----------



## mihe7 (25. Jun 2018)

```
<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>
```


----------

