DOM plz help noob hier

Bitte aktiviere JavaScript!
T

therealduck

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
 
A

Anzeige




Schau mal hier —> (hier klicken)
T

therealduck

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>
 
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
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
Javascript:
const pElements = document.getElementsByTagName('p');
pElements[0].style.fontWeight = "bold";
 
Alternativ auch die etwas umständlichere Variante über die DOM API createElement, appendChild, createTextNode (entsprechend in einer Schleife):
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:
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:
T

therealduck

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."
 
Ich würd's so lösen:
HTML:
<input type="button" onclick="makeBold()">Bold</input>
Und dann entsprechend eben eine function makeBold() in einem script Tag implementieren.
 
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>
 
A

Anzeige




Vielleicht hilft dir das hier weiter: (klicke hier)
Passende Stellenanzeigen aus deiner Region:

Neue Themen

Oben