• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] JavaScript in HTML eingebettet - sind IDs ansprechbar?

K

kplasa

New member
Für das Erstellen einer Fotogalerie über JQuery (kostenloser Galerie-Code) erzeuge ich aufgrund einer Vielzahl von zusätzlichen Anweisungen für jedes einzelne Foto, wie "onclick=" etc., im HTML-Body über Javascript-Code mit einer "for... if... else if..."-Schleife die Fotos innerhalb von "li"-Elementen automatisch. Vom JavaScript selbst funktioniert alles soweit okay, nur lassen sich die IDs der über die Schleife erstellten HTML-Tags innerhalb des JavaScripts nicht mehr ansprechen, weder durch "onclick=" innerhalb des JavaScripts, noch durch JQuery-Befehle im Header des HTML-Dokuments und auch nicht durch CSS in einer externen Datei bzw. im Header des HTML-Dokuments.
Meine Fragen wäre, ob dies einfach so eine "Eigenart" von JavaScript ist und ich, um dies zu umgehen, anstelle des eingebetteten JavaScript-Codes PHP-Code verwenden sollte, weil sich dadurch die Elemente/IDs im eingefügten Script wieder durch JQuery und CSS ansprechen lassen würden? Oder gibt es auch in JavaScript dafür eine Lösungsmöglichkeit?
Ich hab hier mal den in ein div-Element im HTML-Code eingefügten JavaScript-Code eingefügt, um meine Ausführungen etwas plastischer zu illustrieren:

Code: 
<div class="portfolio_right">
<ul id="da-thumbs" class="da-thumbs">

<script>

var thmb_pictures = new Array ("img/portfolio_shoting_thmb001.jpg", "img/portfolio_shoting_thmb002.jpg", "img/portfolio_shoting_thmb003.jpg", "img/portfolio_shoting_thmb004.jpg","img/portfolio_shoting_thmb005.jpg","img/portfolio_shoting_thmb006.jpg","img/portfolio_shoting_thmb007.jpg","img/portfolio_shoting_thm008.jpg","img/portfolio_shoting_thmb009.jpg","img/portfolio_shoting_thmb010.jpg","img/portfolio_shoting_thmb011.jpg", "img/portfolio_shoting_thmb012.jpg", "img/portfolio_shoting_thmb013.jpg", "img/portfolio_shoting_thmb014.jpg", "img/portfolio_shoting_thmb015.jpg", "img/portfolio_shoting_thmb016.jpg", "img/portfolio_shoting_thmb017.jpg", "img/portfolio_shoting_thmb018.jpg", "img/portfolio_shoting_thmb019.jpg", "img/portfolio_shoting_thmb020.jpg", "img/portfolio_shoting_thmb021.jpg", "img/portfolio_shoting_thmb022.jpg", "img/portfolio_shoting_thmb023.jpg", "img/portfolio_shoting_thmb024.jpg", "img/portfolio_shoting_thmb025.jpg", "img/portfolio_shoting_thmb026.jpg", "img/portfolio_shoting_thmb027.jpg", "img/portfolio_shoting_thmb028.jpg", "img/portfolio_shoting_thmb029.jpg", "img/portfolio_shoting_thmb030.jpg", "img/portfolio_shoting_thmb031.jpg", "img/portfolio_shoting_thmb032.jpg", "img/portfolio_shoting_thmb033.jpg", "img/portfolio_shoting_thmb034.jpg");
var pictures = new Array ("img/image_001.jpg", "img/image_002.jpg", "img/image_003.jpg", "img/image_004.jpg", "img/image_005.jpg", "img/image_006.jpg", "img/image_007.jpg", "img/image_008.jpg", "img/image_009.jpg", "img/image_010.jpg", "img/image_011.jpg", "img/image_012.jpg", "img/image_013.jpg", "img/image_014.jpg", "img/image_015.jpg", "img/image_016.jpg", "img/image_017.jpg", "img/image_018.jpg", "img/image_019.jpg", "img/image_020.jpg", "img/image_021.jpg", "img/image_022.jpg", "img/image_023.jpg", "img/image_024.jpg", "img/image_025.jpg", "img/image_026.jpg", "img/image_027.jpg", "img/image_028.jpg", "img/image_029.jpg", "img/image_030.jpg", "img/image_031.jpg", "img/image_032.jpg", "img/image_033.jpg", "img/image_034.jpg")

var i = 1;
var zaehler_000 = 0;
var zaehler_001 = 1;
var zaehler_002 = 2;

for(i==0;i<(thmb_pictures.length+1);i++) {
	
	if(i<9) {
		document.write(" <li><a onclick=\"document.getElementById('overlay_00"+zaehler_001+"').style.display ='block'; document.getElementById('close_button_00"+zaehler_001+"').style.display ='block'; document.getElementById('arrow_left_00"+zaehler_001+"').style.display ='block'; document.getElementById('arrow_right_00"+zaehler_001+"').style.display ='block';\"> <img style=\"cursor: pointer;\" id=\"main\" src=\"img/portfolio_shooting_thmb00"+zaehler_001+".jpg\" /><div style=\"cursor: pointer;\"><span>Das ist das erste Foto.</span></div> <img id=\"overlay_00"+zaehler_001+"\" src=\"img/data/image_00"+zaehler_001+".jpg\" /></a> <img id=\"close_button_00"+zaehler_001+"\" style=\"top: 2%; right: 2%; width: 5%; height: auto; position: fixed; z-index: 2001;\" src=\"img/close_button.png\" onclick=\"document.getElementById('close_button_00"+zaehler_001+"').style.display ='none';document.getElementById('arrow_left_00"+zaehler_001+"').style.display ='none';document.getElementById('arrow_right_00"+zaehler_001+"').style.display ='none'; document.getElementById('overlay_00"+zaehler_001+"').style.display ='none';\" /> <img id=\"arrow_left_00"+zaehler_001+"\" style=\"bottom: 8%; left: 2%; width: 4%; height: auto; position: fixed; z-index: 3001;\" src=\"img/arrowleft_001.png\" onclick=\"document.getElementById('overlay_00"+zaehler_000+"').style.display ='block'; document.getElementById('overlay_00"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_00"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_00"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_left_00"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_right_00"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_left_00"+zaehler_000+"').style.display ='block'; document.getElementById('arrow_right_00"+zaehler_000+"').style.display ='block';\" /> <img id=\"arrow_right_00"+zaehler_001+"\" style=\"bottom: 8%; right: 2%; width: 4%; height: auto; position: fixed; z-index: 3002;\" src=\"img/arrowright_001.png\" onclick=\"document.getElementById('overlay_00"+zaehler_002+"').style.display ='block'; document.getElementById('overlay_00"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_00"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_00"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_left_00"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_right_00"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_left_00"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_right_00"+zaehler_002+"').style.display ='block';\" /> </li>");
zaehler_000=zaehler_000+1;
zaehler_001=zaehler_001+1;
zaehler_002=zaehler_002+1;
}

else if(i==9) {
		document.write(" <li><a onclick=\"document.getElementById('overlay_00"+zaehler_001+"').style.display ='block'; document.getElementById('close_button_00"+zaehler_001+"').style.display ='block'; document.getElementById('arrow_left_00"+zaehler_001+"').style.display ='block'; document.getElementById('arrow_right_00"+zaehler_001+"').style.display ='block';\"> <img style=\"cursor: pointer;\" id=\"main\" src=\"img/portfolio_shooting_thmb00"+zaehler_001+".jpg\" /><div style=\"cursor: pointer;\"><span>Das ist das erste Foto.</span></div> <img id=\"overlay_00"+zaehler_001+"\" src=\"img/data/image_00"+zaehler_001+".jpg\" /></a> <img id=\"close_button_00"+zaehler_001+"\" style=\"top: 2%; right: 2%; width: 5%; height: auto; position: fixed; z-index: 2001;\" src=\"img/close_button.png\" onclick=\"document.getElementById('close_button_00"+zaehler_001+"').style.display ='none';document.getElementById('arrow_left_00"+zaehler_001+"').style.display ='none';document.getElementById('arrow_right_00"+zaehler_001+"').style.display ='none'; document.getElementById('overlay_00"+zaehler_001+"').style.display ='none';\" /> <img id=\"arrow_left_00"+zaehler_001+"\" style=\"bottom: 8%; left: 2%; width: 4%; height: auto; position: fixed; z-index: 3001;\" src=\"img/arrowleft_001.png\" onclick=\"document.getElementById('overlay_00"+zaehler_000+"').style.display ='block'; document.getElementById('overlay_00"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_00"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_0"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_left_00"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_right_00"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_left_00"+zaehler_000+"').style.display ='block'; document.getElementById('arrow_right_00"+zaehler_000+"').style.display ='block';\" /> <img id=\"arrow_right_00"+zaehler_001+"\" style=\"bottom: 8%; right: 2%; width: 4%; height: auto; position: fixed; z-index: 3002;\" src=\"img/arrowright_001.png\" onclick=\"document.getElementById('overlay_0"+zaehler_002+"').style.display ='block'; document.getElementById('overlay_00"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_00"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_0"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_left_00"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_right_00"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_left_0"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_right_0"+zaehler_002+"').style.display ='block';\" /> </li>")
zaehler_000=zaehler_000+1;
zaehler_001=zaehler_001+1;
zaehler_002=zaehler_002+1;
}

else if(i==10) {
		document.write(" <li><a onclick=\"document.getElementById('overlay_0"+zaehler_001+"').style.display ='block'; document.getElementById('close_button_0"+zaehler_001+"').style.display ='block'; document.getElementById('arrow_left_0"+zaehler_001+"').style.display ='block'; document.getElementById('arrow_right_0"+zaehler_001+"').style.display ='block';\"> <img style=\"cursor: pointer;\" id=\"main\" src=\"img/portfolio_shooting_thmb0"+zaehler_001+".jpg\" /><div style=\"cursor: pointer;\"><span>Das ist das erste Foto.</span></div> <img id=\"overlay_0"+zaehler_001+"\" src=\"img/data/image_0"+zaehler_001+".jpg\" /></a> <img id=\"close_button_0"+zaehler_001+"\" style=\"top: 2%; right: 2%; width: 5%; height: auto; position: fixed; z-index: 2001;\" src=\"img/close_button.png\" onclick=\"document.getElementById('close_button_0"+zaehler_001+"').style.display ='none';document.getElementById('arrow_left_0"+zaehler_001+"').style.display ='none';document.getElementById('arrow_right_0"+zaehler_001+"').style.display ='none'; document.getElementById('overlay_0"+zaehler_001+"').style.display ='none';\" /> <img id=\"arrow_left_0"+zaehler_001+"\" style=\"bottom: 8%; left: 2%; width: 4%; height: auto; position: fixed; z-index: 3001;\" src=\"img/arrowleft_001.png\" onclick=\"document.getElementById('overlay_00"+zaehler_000+"').style.display ='block'; document.getElementById('overlay_0"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_0"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_0"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_left_0"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_right_0"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_left_00"+zaehler_000+"').style.display ='block'; document.getElementById('arrow_right_00"+zaehler_000+"').style.display ='block';\" /> <img id=\"arrow_right_0"+zaehler_001+"\" style=\"bottom: 8%; right: 2%; width: 4%; height: auto; position: fixed; z-index: 3002;\" src=\"img/arrowright_001.png\" onclick=\"document.getElementById('overlay_0"+zaehler_002+"').style.display ='block'; document.getElementById('overlay_0"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_0"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_0"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_left_0"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_right_0"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_left_0"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_right_0"+zaehler_002+"').style.display ='block';\" /> </li>")
zaehler_000=zaehler_000+1;
zaehler_001=zaehler_001+1;
zaehler_002=zaehler_002+1;
}

else if((i>10)&&(i<99)) {
		document.write(" <li><a onclick=\"document.getElementById('overlay_0"+zaehler_001+"').style.display ='block'; document.getElementById('close_button_0"+zaehler_001+"').style.display ='block'; document.getElementById('arrow_left_0"+zaehler_001+"').style.display ='block'; document.getElementById('arrow_right_0"+zaehler_001+"').style.display ='block';\"> <img style=\"cursor: pointer;\" id=\"main\" src=\"img/portfolio_shooting_thmb0"+zaehler_001+".jpg\" /><div style=\"cursor: pointer;\"><span>Das ist das erste Foto.</span></div> <img id=\"overlay_0"+zaehler_001+"\" src=\"img/data/image_0"+zaehler_001+".jpg\" /></a> <img id=\"close_button_0"+zaehler_001+"\" style=\"top: 2%; right: 2%; width: 5%; height: auto; position: fixed; z-index: 2001;\" src=\"img/close_button.png\" onclick=\"document.getElementById('close_button_0"+zaehler_001+"').style.display ='none';document.getElementById('arrow_left_0"+zaehler_001+"').style.display ='none';document.getElementById('arrow_right_0"+zaehler_001+"').style.display ='none'; document.getElementById('overlay_0"+zaehler_001+"').style.display ='none';\" /> <img id=\"arrow_left_0"+zaehler_001+"\" style=\"bottom: 8%; left: 2%; width: 4%; height: auto; position: fixed; z-index: 3001;\" src=\"img/arrowleft_001.png\" onclick=\"document.getElementById('overlay_0"+zaehler_000+"').style.display ='block'; document.getElementById('overlay_0"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_0"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_0"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_left_0"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_right_0"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_left_0"+zaehler_000+"').style.display ='block'; document.getElementById('arrow_right_0"+zaehler_000+"').style.display ='block';\" /> <img id=\"arrow_right_0"+zaehler_001+"\" style=\"bottom: 8%; right: 2%; width: 4%; height: auto; position: fixed; z-index: 3002;\" src=\"img/arrowright_001.png\" onclick=\"document.getElementById('overlay_0"+zaehler_002+"').style.display ='block'; document.getElementById('overlay_0"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_0"+zaehler_001+"').style.display ='none'; document.getElementById('close_button_0"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_left_0"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_right_0"+zaehler_001+"').style.display ='none'; document.getElementById('arrow_left_0"+zaehler_002+"').style.display ='block'; document.getElementById('arrow_right_0"+zaehler_002+"').style.display ='block';\" /> </li>")
zaehler_000=zaehler_000+1;
zaehler_001=zaehler_001+1;
zaehler_002=zaehler_002+1;
}
}

</script>

</ul>
</div>
 
Zuletzt bearbeitet:
Das ist jetzt aber nicht dein Ernst? Wer soll sich denn solchen Code anschauen? Lass das bitte erstmal durch den Beautifier laufen und korrigiere dann den Code mit der Bearbeiten Schaltfläche.
 
Ich finde deinen Code in der Form sehr unübersichtlich, komisch und verwirrend.
Eins ist mir aber aufgefallen, und zwar ist deine Stringverkettung syntaktisch völlig falsch: document.getElementById('arrow_right_00"+zaehler_001+"');
Dieses zaehler-Ding soll doch eine Variable sein, oder? Dann muss das so aussehen document.getElementById("arrow_right_00" + zaehler_001);
Bitte wirf auch einen Blick in die Webentwickler-Konsole!

JavaScript in einen <ul> zu stecken und mit document.write in's HTML zu schreiben ist jetzt vorsichtig ausgedrückt nicht gerade ein sauberer Stil...

Übrigens solltest du new Array() vermeiden und stattdessen mit der Literalschreibweise arbeiten:
Code: 
var pictures = ["img/image_001.jpg", "img/image_002.jpg", "img/image_003.jpg", "img/image_004.jpg", "img/image_005.jpg", "img/image_006.jpg", "img/image_007.jpg", "img/image_008.jpg", "img/image_009.jpg", "img/image_010.jpg", "img/image_011.jpg", "img/image_012.jpg", "img/image_013.jpg", "img/image_014.jpg", "img/image_015.jpg", "img/image_016.jpg", "img/image_017.jpg", "img/image_018.jpg", "img/image_019.jpg", "img/image_020.jpg", "img/image_021.jpg", "img/image_022.jpg", "img/image_023.jpg", "img/image_024.jpg", "img/image_025.jpg", "img/image_026.jpg", "img/image_027.jpg", "img/image_028.jpg", "img/image_029.jpg", "img/image_030.jpg", "img/image_031.jpg", "img/image_032.jpg", "img/image_033.jpg", "img/image_034.jpg"];
Nebenbei bemerkt ist es ziemlich unsinnig, 34 fortlaufend nummerierte Dateinamen manuell in ein Array einzutragen - das kann z.B. über eine for-Schleife wunderbar automatisch erledigt werden...
 
Wennn nicht einmal das eingebundene CSS greift, würde ich dazu tendieren zu sagen, das das generierte HTML fehlerhaft ist. Hast du denn mal probiert die gerenderte Seite mittels Validator zu prüfen?

PS: Deinen Code habe ich jetzt nicht durchgegrast...
 
Julian schrieb:
und zwar ist deine Stringverkettung syntaktisch völlig falsch
Zum Vergrößern anklicken....
Nein, die ist nicht falsch, da dort JS-Code in einem String, der HTML enthält, zusammengebaut wird.

@kplasa: zu deinem Problem: lass dir doch mal den HTML-Code, der da erzeugt wird mal direkt (z.B. mittels alert() oder console.log()) ausgeben. Da scheint irgendwas nicht so zu laufen, die du es gerne hättest.
Aber ich würde das ja prinzipiell nicht mit JS lösen, sondern den HTML-Code serverseitig erzeugen lassen. Hast du das nichts zur Hand?

PS: Ich bin einfach unverbesserlich: document.write() empfehle ich Anfängern ausdrücklich nicht. Verwenden lieber .innerHTML, die nativen DOM-Methoden umd Elemente zu erzeugen/modifizieren oder ein Framework deiner Wahl.
PPS: Auch den Array-Konstruktor sollte man nicht verwenden. Die Literalschreibweise ist kürzer, konsistenter und (meiner Meinung nach) besser zu lesen.
PPPS: warum hast du drei Zähler, in denen immer das gleiche gespeichert ist?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben