Infos aus html-Datei auslesen

[12345]

Mit document.getElementById kann ich kann per Javascript Werte in den HTML-Code eintragen. Wie kann ich diese auslesen? Damit ich z.B eine If-Anweisung durchführen kann, wenn z.B. ein Bild vergrößert wird.

[Gunther]

Hallo! <= Begrüßung ist auch immer sehr nett! ;-)

Mit document.getElementById kann ich kann per Javascript Werte in den HTML-Code eintragen. Wie kann ich diese auslesen? Damit ich z.B eine If-Anweisung durchführen kann, wenn z.B. ein Bild vergrößert wird.

Man kann per Javascript sicherlich sehr vieles tun, wenn es denn verfügbar und aktiviert ist.
Vielleicht erklärst du uns bitte (nochmal) genau, was du denn nun eigentlich machen/ erreichen möchtest?

Gruß Gunther

[12345]

Hi,
Also ich habe ein Script, dass ein Bild auf der Website austauscht. Unter diesem wechselden Bildern habe ich eine Leiste die anzeigen soll, welches Bild gerade angezeigt wird. Das Script zum wechseln der Bilder ändert immer die src der img Zeile im Html Code. Nun würde ich gerne jenachdem welches Bild gerade angezeigt wird also was in src steht die Angabe welches Bild angezeigt wird ändern.

[Gunther]

Hi,

Also ich habe ein Script, dass ein Bild auf der Website austauscht. Unter diesem wechselden Bildern habe ich eine Leiste die anzeigen soll, welches Bild gerade angezeigt wird. Das Script zum wechseln der Bilder ändert immer die src der img Zeile im Html Code. Nun würde ich gerne jenachdem welches Bild gerade angezeigt wird also was in src steht die Angabe welches Bild angezeigt wird ändern.

Dann pack' das doch mit in deine schon vorhandene Funktion.
Wie Gunnar schon geschrieben und vermutet hat, bspw. mit 'innerHTML' (angewendet auf das Element, welches den Text mit dem Bildnamen/ der Bildunterschrift enthält).

Es wäre aber für alle einfacher, wenn du uns hier mal den jeweils relevanten Teil von deinem HTML und Javascript Code posten würdest, oder einen Link zu einem Online-Beispiel.

Gruß Gunther

[12345]

Okay danke für die Antwort.
Kann ich denn auch einbauen, dass man per Klick auf einen Punkt(Bild in der Leiste unter dem wechselndes Bildern) zu einem bestimmten Bild gelangt? Und per Klick auf einen Pfeil nach rechts bzw. nach Links ein Bild vor, bzw. zurück kommt?

var bild1 = new Image();  
			bild1.src = '1.jpg';  
			var bild2 = new Image();  
			bild2.src = '2.jpg';  
			var bild3 = new Image();  
			bild3.src = '3.jpg';  
			var bild4 = new Image();  
			bild3.src = '4.jpg';  
			  
			var erstesBild = 0;  
			var zweitesBild = 1;  
			var op = 1;  
			var op_ie = 100;  
			  
			var allebilder = new Array('1.jpg','2.jpg','3.jpg','4.jpg');  
			var lang = allebilder.length;  
			  
			  
			function bildwechselfunktion() {  
				var bildnr1 = document.getElementById('bild1');  
				var bildnr2 = document.getElementById('bild2');  
								  
				bildnr1.src = allebilder[erstesBild];  
				bildnr2.src = allebilder[zweitesBild];  
				bildnr1.style.opacity = '1';  
				bildnr1.style.filter = 'alpha(opacity=100)';  
				  
				erstesBild++;  
				zweitesBild++;  
				if((erstesBild+1) == lang) {  
					zweitesBild = 0;  
				}	  
				if(erstesBild == lang && zweitesBild == 1) {  
					erstesBild = 0;  
					zweitesBild = 1;  
				}  
				window.setTimeout("bildwechsel()",3000);  
			  
			}  
			function bildwechsel() {  
				if(op > 0) {  
					op = op - 0.1;  
					op_ie = op_ie - 10;  
					document.getElementById('bild1').style.opacity = op;  
					document.getElementById('bild1').style.filter = 'alpha(opacity=' + op_ie + ')';  
					window.setTimeout("bildwechsel()",100);  
				} else {  
					op = 1;  
					op_ie = 100;  
					window.setTimeout("bildwechselfunktion()",0);  
				}  
			}

 <div id="wechselndesbild">  
   <img src="" alt="" id="bild1">  
   <img src="" alt="" id="bild2">  
 </div>  
   <div id="bildauswahlleiste">  
   <div id="bildauswahl">  
		  
			<li> <a href="#" ><img id="pfeil_links" src="" /></a>  
			<li> <a href="#" ><img id="punkt1" src="" /></a>  
			<li> <a href="#" ><img id="punkt2" src="" /></a>  
			<li> <a href="#" ><img id="punkt3" src="" /></a>  
			<li> <a href="#" ><img id="punkt4" src="" /></a>  
			<li> <a href="#" ><img id="pfeil_rechts" src="" /></a>  
		  
   </div>  
   </div>

[M.]

Mahlzeit,

Kann ich denn auch einbauen, dass man per Klick auf einen Punkt(Bild in der Leiste unter dem wechselndes Bildern) zu einem bestimmten Bild gelangt? Und per Klick auf einen Pfeil nach rechts bzw. nach Links ein Bild vor, bzw. zurück kommt?

Nennt sich Slideshow oder Carousel. Wurde geschätzte 5000453331455335mal umgesetzt. Du solltest also mit den Suchbegriffen fündig werden ;)

[Gunnar Bittersmann]

@@M.:

nuqneH

Nennt sich Slideshow oder Carousel. Wurde geschätzte 5000453331455335mal umgesetzt.

Davon geschätzte 5000453331455334 Male mit jQuery. ;-)

Qapla'

[Moritz]

werf einmal eine Blick auf diese Seite Dynamic Web Coding

kein jQuery !

[Gunnar Bittersmann]

@@12345:

nuqneH

Mit document.getElementById kann ich kann per Javascript Werte in den HTML-Code eintragen.

Nein, nicht (allein) damit.

Von der Spitzfindigkeit mal ganz abgesehen, dass du mit JavaScript nirgends was in den HTML-Code eintragen kannst, denn der ist längst gegessen.

Wie kann ich diese auslesen?

Eventuell mit denselben Eigenschaften, womit du diese eingetragen hast. (innerHTML bspw.) Wie hast du’s gemacht?

Damit ich z.B eine If-Anweisung durchführen kann, wenn z.B. ein Bild vergrößert wird.

Hä??

Qapla'

[12345]

Danke für die ganzen Antworten. Ich würde allerdings schon gerne selber das Script schreiben.
Kann ich denn eine Variable "abspeichern"? Wenn ich eine Variable in einer Funktion berechnen lasse, würde ich auf diese gerne in einer anderen Funktion zugreifen. Wie bekomme ich das am einfachsten geregelt?
Danke schonmal

[Doktor Knallcharge]

Kann ich denn eine Variable "abspeichern"? Wenn ich eine Variable in einer Funktion berechnen lasse, würde ich auf diese gerne in einer anderen Funktion zugreifen. Wie bekomme ich das am einfachsten geregelt?

Variablen existieren, wie in den meisten anderen Programmiersprachen auch, innerhalb eines Geltungsbereiches, der sich aus dem lokalen Bereich (üblicherweise die Funktion, in der die Variable definiert wird) und übergeordneten (übergeordnete Funktionen und der globale Namensraum) zusammensetzt.

document ist zum Beispiel eine Variable im globalen Namensraum, auf die du ganz selbstverständlich auch in Funktionen zugreifen kannst. Bei eigenen Variablen ist das nicht anders.

(function () {  
  
  var a = 0, b = 0;  
  
  function bla() {  
    a = 1; // Variable a aus übergeordnetem Bereich  
  }  
  
  function fasel() {  
    var c = 5;  // Variable c existiert nur in dieser Funktion  
    function dings(bumms) {  
       c = bumms - 1;  
    }  
  
    // c ist 5  
    dings(b);  
    // c ist -1, da beim ersten Aufruf b = 0.  
  
    b = a + 1; // ändert Variable a und b aus übergeordnetem Bereich  
  }  
  
  a = 5;  
  bla();  
  fasel();  
  console.debug(a, b, c); // gibt a = 1, b = 2 aus und kennt c nicht, da c nur in Unterfunktion fasel() definiert  
  
})();  
console.debug(a, b, c); // kennt a, b und c nicht, da alle innerhalb der anonymen Funktion definiert  

Allerdings möchtest du den globalen Namensraum nicht mit eigenem Kram zumüllen, halte ihn für den Browser und Javascript-Bibliotheken frei. Das auf den ersten Blick etwas merkwürdige Konstrukt

(function () {
…
})();

das den kompletten Code enthält, erzeugt mit function () eine namenlose / anonyme Funktion, die wegen des abschließenden () auch gleich ausgeführt wird. Es passiert also das Gleiche, als wenn du den Code direkt schreibst, aber sämtliche Variablen bleiben innerhalb dieses geschlossenen Blocks und kommen anderen Skripten nicht in den Weg.

[12345]

Hi, danke für die Antwort!
Wie genau muss ich das denn anwenden? Also das komplette Script in eine Function packen? Und wie wird diese aufgerufen? Per Onload? Und was genau hat es mit den Klammern aufsich? Vor function eine Klammer?

Danke

[Doktor Knallcharge]

Wie genau muss ich das denn anwenden? Also das komplette Script in eine Function packen? Und wie wird diese aufgerufen? Per Onload? Und was genau hat es mit den Klammern aufsich? Vor function eine Klammer?

Du solltest vielleicht erst mal wissen, dass in Javascript

function funktionsname(a, b, c) {  
}

ein anderer Weg ist, um

var funktionsname = function (a, b, c) {  
}

zu schreiben. Funktionen sind in Javascript ganz normale Objekte, die, wie alle anderen Objekte, in einer Variablen hausen. Erzeugt werden Funktionsobjekte mit dem Schlüsselwort function.
Im zweiten Weg oben wird das Konzept deutlich. Der erste passt sich hingegen an andere Sprachen an und ist dadurch zwar "leichter bekömmlich", verschleiert aber dummerweise die wahre Natur von Funktionen in Javascript.

Ausgeführt werden Funktionsobjekte, in dem an den Variablennamen ein Klammerpaar angehängt wird, welches bei Bedarf die Argumente übernimmt:

funktionsname(1, 2, 3); // altbekannt, aber: funktionsname ist eine echte Variable!  

Bedenke: funktionsname ist nicht die Funktion, sondern die Variable, die das Funktionsobjekt enthält.

Da eine Funktion ein normales Objekt ist, kannst du analog zu

var i = 1; // Variable i mit 1 belegen  
var a = i; // Inhalt von i nach a übernehmen

im Anschluss an das Erstellen der Funktion funktionsname auch

var anderername = funktionsname; // Funktionsobjekt aus funktionsname nach Variable anderername  
anderername(1, 2, 3); // Funktionsobjekt ausführen 

schreiben. Dieselbe Funktion ist dann sowohl unter dem Namen funktionsname als auch unter dem Namen anderername ausführbar.

Hängen wir jetzt spaßeshalber noch dieses an:

funktionsname = 23; // der Variablen funktionsname anderen Wert zuweisen  
funktionsname(1, 2, 3); // Fehler!

wird der Interpreter dir die zweite Zeile um die Ohren hauen, denn in funktionsname steht ja kein Funktionsobjekt mehr, sondern ein (nicht ausführbares) Number-Objekt mit Wert 23.

Zurück zur anonymen Funktion:

Du erzeugst also eine anonyme, eine namenlose Funktion und schreibst deinen gesamten Code in dieser Funktion (hier durch … dargestellt):

function () {…}  
^^^^^^^^^^^^^^^---erzeugt Funktionsobjekt

function gibt, wie eingangs beschrieben, ein Funktionsobjekt zurück. Dieses Objekt lagern wir gar nicht erst in einer Variablen, sondern lassen es an Ort und Stelle ausführen, indem wir () hintenanstellen:

function () {…}()  
               ^^---Aufruf des neuen Funktionsobjekts  
^^^^^^^^^^^^^^^---erzeugt Funktionsobjekt

Um daraus korrekte Javascript-Syntax zu machen, muss allerdings noch ein Klammerpaar hinzukommen. Dafür gibt es zwei Möglichkeiten:

(function () {…}());  
(function () {…})(); 

Welche Variante du nimmst, ist wurscht. Die einen bevorzugen Variante 1, weil das gesamte Ding sauber in einem Klammerpaar verpackt ist. Andere nehmen Variante 2, weil dort durch das rechts aussen stehende Klammerpaar deutlicher wird, dass das Funktionsobjekt sofort aufgerufen wird.

[Gunnar Bittersmann]

@@Doktor Knallcharge:

nuqneH

Du solltest vielleicht erst mal wissen, dass in Javascript
function funktionsname(a, b, c) { }
ein anderer Weg ist, um
var funktionsname = function (a, b, c) { }
zu schreiben.

Mit dem Unterschied, dass erstes irgendwo stehen kann, zweites muss vor dem ersten Aufruf stehen.

funktionsname(0, 8, 15);  
  
function funktionsname(a, b, c)  
{  
  console.log('Funktion funktionsname aufgerufen mit Parametern ', a, ', ', b, ', ', c, '.');  
}

ergibt: Funktion funktionsname aufgerufen mit Parametern 0, 8, 15.

funktionsname(0, 8, 15);  
  
var funktionsname = function (a, b, c)  
{  
  console.log('Funktion funktionsname aufgerufen mit Parametern ', a, ', ', b, ', ', c, '.');  
}

hingegen: TypeError: funktionsname is not a function

var funktionsname = function (a, b, c)  
{  
  console.log('Funktion funktionsname aufgerufen mit Parametern ', a, ', ', b, ', ', c, '.');  
}  
  
funktionsname(0, 8, 15);

ergibt: Funktion funktionsname aufgerufen mit Parametern 0, 8, 15.

Qapla'

[12345]

Danke, aber ich verstehe noch nicht genau wie das nun funktionieren soll.
Ist es möglich dies folgenden beiden Funktionen in eine Funktion zu packen, so dass die Variablen in beiden Funktionen bearbeitet werden können?

var bild1 = new Image();  
			bild1.src = '1.jpg';  
			var bild2 = new Image();  
			bild2.src = '2.jpg';  
			var bild3 = new Image();  
			bild3.src = '3.jpg';  
			var bild4 = new Image();  
			bild3.src = '4.jpg';  
			  
			var bildoben = 0;  
			var bildunten = 1;  
			var op = 1;  
			var op_ie = 100;  
			  
			var diebilder = new Array('1.jpg','2.jpg','3.jpg','4.jpg');  
			var lang = diebilder.length;  
			  
			  
			function slider() {  
				var rahmen1 = document.getElementById('bild1');  
				var rahmen2 = document.getElementById('bild2');  
								  
				rahmen1.src = diebilder[bildoben];  
				rahmen2.src = diebilder[bildunten];  
				rahmen1.style.opacity = '1';  
				rahmen1.style.filter = 'alpha(opacity=100)';  
				  
				bildoben++;  
				bildunten++;  
				if((bildoben+1) == lang) {  
					bildunten = 0;  
				}	  
				if(bildoben == lang && bildunten == 1) {  
					bildoben = 0;  
					bildunten = 1;  
				}  
				if(bildoben == 1){  
				document.getElementById('punkt1').src = 'bildauswahlpunkt_grau.gif';  
				}else{  
				document.getElementById('punkt1').src = 'bildauswahlpunkt.gif';  
				}  
				if(bildoben == 2){  
				document.getElementById('punkt2').src = 'bildauswahlpunkt_grau.gif';  
				}else{  
				document.getElementById('punkt2').src = 'bildauswahlpunkt.gif';  
				}  
				if(bildoben == 3){  
				document.getElementById('punkt3').src = 'bildauswahlpunkt_grau.gif';  
				}else{  
				document.getElementById('punkt3').src = 'bildauswahlpunkt.gif';  
				}  
				if(bildoben == 0){  
				document.getElementById('punkt4').src = 'bildauswahlpunkt_grau.gif';  
				}else{  
				document.getElementById('punkt4').src = 'bildauswahlpunkt.gif';  
				}  
				window.setTimeout("slidemove()",3000);  
			  
			}

function bildzurueck() {  
bildoben = bildoben - 1;

Und was muss dann in den Onload-Tag?