Tweet
Verändern von innerHTML über eine Schleife
Guten Morgen, ersteinmal bin ich sehr froh ein Deutschsprachiges Forum gefunden zu haben und dafür schon einmal DANKE. :-)
Javascript und ich lernen uns gerade besser kennen und möchte nun als kleines "Lernprojekt" einen Spamschutz für mein Kontaktformular nach meinen Vorstellungen erstellen. Ich habe zwar fertige im Netz gefunden, hier geht aber auch mehr um den Lernfaktor.
Ich habe in HTML/Bootstrap was vorbereitet. Ich habe ein Bild von einem Tier und daneben habe ich 3 Auswahlmöglichkeiten mit RadioButtons ungefähr so.
<!DOCTYPEhtml>
<htmllang="de">
<body> <divclass="container"style="height: 150px;">
<divclass="row">
<divclass="col-6 text-right"style="height: 150px;">
<imgsrc="http://pinegrow.com/placeholders/img13.jpg"id="bild"height="100%">
</div>
<divclass="col-6">
<divdata-toggle="buttons"class="btn-group-vertical"style="top: 5%;">
<labelclass="btn btn-secondary">
<inputtype="radio"name="options"id="option1"autocomplete="off"> Auswahl 1
</label>
<labelclass="btn btn-secondary">
<inputtype="radio"name="options"id="option2"autocomplete="off"> Auswahl2
</label>
<labelclass="btn btn-secondary">
<inputtype="radio"name="options"id="option3"autocomplete="off"> Auswahl3
</label>
</div>
</div>
</body>
</html>
Jetzt möchte ich das Bild und die Antwortmöglichkeiten über Javascript zufallsgenerien und dieses direkt über eine Schleife und ein Array.
Leider bekomme ich es einfach nicht hin auf das einzelne Element im Array zuzugreifen und zu verändern. Mein JS Code sieht bis jetzt so aus.
"use strict"
//für das anzuzeigene Bild
let bild = document.getElementById("bild");
bild.setAttribute('src', "bild/alice.jpg");
//alle Elemente mit dem Tag label abgreifen
let option = [document.getElementsByTagName("label")];
//console.log(option);
// !!!Hier möchte ich nun gern auf die Attribute zugreifen
// in dem Fall der innerHTML (denke ich). Der Text z.B. Auswahl 1
// soll z.B. Hund sein. (Diese packe ich dann später in Arrays)
option[0]. //WAS MUSS HIER HIN??
Der Lerneffekt soll hier sein zu wissen wie ich die einzelnen Attribute ansteuer in einem Array.
Ich bedanke mich schon einmal ganz herzlich und freue mich auf eure Antworten.
Grüße aus Hannover
Marcel
P.S. ist das mit den Code-Snippets so OK oder habt ihr im Forum das lieber ausgelagert und dann nur als Link?
Javascript und ich lernen uns gerade besser kennen und möchte nun als kleines "Lernprojekt" einen Spamschutz für mein Kontaktformular nach meinen Vorstellungen erstellen. Ich habe zwar fertige im Netz gefunden, hier geht aber auch mehr um den Lernfaktor.
Ich habe in HTML/Bootstrap was vorbereitet. Ich habe ein Bild von einem Tier und daneben habe ich 3 Auswahlmöglichkeiten mit RadioButtons ungefähr so.
<!DOCTYPEhtml>
<htmllang="de">
<body> <divclass="container"style="height: 150px;">
<divclass="row">
<divclass="col-6 text-right"style="height: 150px;">
<imgsrc="http://pinegrow.com/placeholders/img13.jpg"id="bild"height="100%">
</div>
<divclass="col-6">
<divdata-toggle="buttons"class="btn-group-vertical"style="top: 5%;">
<labelclass="btn btn-secondary">
<inputtype="radio"name="options"id="option1"autocomplete="off"> Auswahl 1
</label>
<labelclass="btn btn-secondary">
<inputtype="radio"name="options"id="option2"autocomplete="off"> Auswahl2
</label>
<labelclass="btn btn-secondary">
<inputtype="radio"name="options"id="option3"autocomplete="off"> Auswahl3
</label>
</div>
</div>
</body>
</html>
Jetzt möchte ich das Bild und die Antwortmöglichkeiten über Javascript zufallsgenerien und dieses direkt über eine Schleife und ein Array.
Leider bekomme ich es einfach nicht hin auf das einzelne Element im Array zuzugreifen und zu verändern. Mein JS Code sieht bis jetzt so aus.
"use strict"
//für das anzuzeigene Bild
let bild = document.getElementById("bild");
bild.setAttribute('src', "bild/alice.jpg");
//alle Elemente mit dem Tag label abgreifen
let option = [document.getElementsByTagName("label")];
//console.log(option);
// !!!Hier möchte ich nun gern auf die Attribute zugreifen
// in dem Fall der innerHTML (denke ich). Der Text z.B. Auswahl 1
// soll z.B. Hund sein. (Diese packe ich dann später in Arrays)
option[0]. //WAS MUSS HIER HIN??
Der Lerneffekt soll hier sein zu wissen wie ich die einzelnen Attribute ansteuer in einem Array.
Ich bedanke mich schon einmal ganz herzlich und freue mich auf eure Antworten.
Grüße aus Hannover
Marcel
P.S. ist das mit den Code-Snippets so OK oder habt ihr im Forum das lieber ausgelagert und dann nur als Link?
Comment