DOM plz help noob hier


T

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
 

Hinweis: Wenn du jetzt Java lernen möchtest, dann schau dir diese kurze Präsentation hier an (hier klicken!)
Sichere dir hier den Zugriff auf umfangreiches Java-Know How und starte richtig durch!

Hinweis: Wenn du jetzt Java lernen möchtest, dann schau dir diese kurze Präsentation hier an (hier klicken!)
Sichere dir hier den Zugriff auf umfangreiches Java-Know How und starte richtig durch!

T

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>
 

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

httpdigest

Bekanntes Mitglied
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

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

httpdigest

Bekanntes Mitglied
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.
 
T

therealduck

Guest
-
 
Zuletzt bearbeitet von einem Moderator:

mihe7

Bekanntes Mitglied
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>
 

Passende Stellenanzeigen aus deiner Region:


Neue Themen

Oben