DOM plz help noob hier

T

therealduck

Gast
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
 
T

therealduck

Gast
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

Robat

Top Contributor
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";
 
H

httpdigest

Top Contributor
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

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

httpdigest

Top Contributor
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.
 
mihe7

mihe7

Top Contributor
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>
 
Ähnliche Java Themen
  Titel Forum Antworten Datum
M Serveranfragen bitte warten mit * überbrücken NEED HELP !!! Angular, React, JQuery - Fragen zu JavaScript 4
T Alert Box beim window close --> totaler Noob Angular, React, JQuery - Fragen zu JavaScript 4
T Wie kann man den code hier abändern, damit es "Array-werte" einliest und nicht Excelwerte? Angular, React, JQuery - Fragen zu JavaScript 2
V Bin ich hier richtig? Angular, React, JQuery - Fragen zu JavaScript 4

Ähnliche Java Themen

Aktuelle Jobs

Neue Themen


Oben