nicht angemeldet
Bilder in Javascript darstellen
0 
JürgenB
0 0 
Matthias Apsel
0
0
Bilder in Javascript darstellen
hi,
ich habe ein winziges Programm gebaut.
beim raufklicken soll ein bild "bourbon.jpg" erscheinen, wenn zufallszahl >=0.5.
Unter Console bekomme ich folende Fehlermeldung:
Uncaught TypeError: Cannot set property 'src' of undefined
habe ich das Bild falsch definiert?
<html>
<head>
<title>graphik</title>
</head>
<body>
<script type="text/javascript">
bild= new Image(100,60);
bild.src="bourbon.jpg";
function bild1(){
var x= Math.random();
console.log(x);
if (x>=0.5){
document.images["bild"].src = bild.src;
}}
</script>
<form name="graphikmachen">
<input type="button" name="klickdrauf"
onclick=bild1();>
</body>
</html>
-
Hallo amitor,
habe ich das Bild falsch definiert?
im HTML habe ich überhaupt kein img-Tag gefunden.
Gruß, Jürgen
-
Hallo amitor,
habe ich das Bild falsch definiert?
im HTML habe ich überhaupt kein img-Tag gefunden.
Gruß, Jürgen
ist vielleicht eine blöde Frage, aber wie kann ich den img-Tag so schreiben, damit das Bild erst nach dem Klicken auf den button erscheint?
http://de.selfhtml.org/javascript/objekte/images.htm
habe ich rauf und runter gelesen, aber ich bin daraus nicht wirklich schlau geworden.
Gruß, amitor
-
Om nah hoo pez nyeetz, amitor!
ist vielleicht eine blöde Frage, aber wie kann ich den img-Tag so schreiben, damit das Bild erst nach dem Klicken auf den button erscheint?
Indem du per CSS dem Bild display: none mitgibst und ggf. mit Javascript den Wert der display-Eigenschaft änderst. Besser wäre, die Klassenzugehörigkeit des Bildes zu ändern.
Matthias
--
1/z ist kein Blatt Papier.
-
Om nah hoo pez nyeetz, amitor!
ist vielleicht eine blöde Frage, aber wie kann ich den img-Tag so schreiben, damit das Bild erst nach dem Klicken auf den button erscheint?
Indem du per CSS dem Bild display: none mitgibst und ggf. mit Javascript den Wert der display-Eigenschaft änderst. Besser wäre, die Klassenzugehörigkeit des Bildes zu ändern.
Matthias
danke, gibts dafür nen beispiel
-
Om nah hoo pez nyeetz, amittor!
Bitte zitiere sinnvoll, nicht einfach das gesamte Posting - Danke.
Wie detailliert müsste das Beispiel denn sein?
Matthias
--
1/z ist kein Blatt Papier.
-
Bitte zitiere sinnvoll, nicht einfach das gesamte Posting - Danke.
Ok, mach ich.
Wie detailliert müsste das Beispiel denn sein?
nur soweit um die Synthax dahinter nachzuvollziehen.
gruß, amitor.
-
Moin,
Wie detailliert müsste das Beispiel denn sein?
nur soweit um die Synthax dahinter nachzuvollziehen.In diesem Beispiel werden dynamisch Bilder angezeigt.
Das erste Bild ist als Element schon vorhanden und wird nur noch per Javascript eingeblendet (display="block").
Das zweite Bild ist noch nicht als Element vorhanden, sondern wird komplett von Javascript generiert und dann eingehängt.
Grüße Marco
-
Moin,
Das erste Bild ist als Element schon vorhanden und wird nur noch per Javascript eingeblendet (display="block").
Das zweite Bild ist noch nicht als Element vorhanden, sondern wird komplett von Javascript generiert und dann eingehängt.
Edit: Ich habe noch die dritte Möglichkeit implementiert: Den Klassenwechsel. Das wäre Nummer 3 im Bunde.
Grüße Marco
-
Das hat mit alle drei Möglichkeiten super geklappt.
Danke.Ich habe dann aber etwas anderes versucht,wovon ich dann dachte es müsse funktionieren, was doch nicht geklappt hat.
Anstelle von getElementById("dasbild") eben getElementsByName("bild") genommen.document.getElementsByName("bild").style.display = "block";
<img id="dasbild" src="bourbon.jpg" name="bild" alt="bourbon" style="display:none">
Müsste es nicht auf der selben weise funktionieren?
-
Moin,
Ich habe dann aber etwas anderes versucht,wovon ich dann dachte es müsse funktionieren, was doch nicht geklappt hat.
Anstelle von getElementById("dasbild") eben getElementsByName("bild") genommen.Wie schon der Funktionsname vermuten lässt, liefert getElementById() genau _ein_ Element, während getElementsByName() mehrere Elemente liefert. Das liegt daran, dass eine ID nur einmal vergeben werden darf, Namen aber auch mehrfach vergeben werden dürfen.
document.getElementsByName("bild").style.display = "block";
<img id="dasbild" src="bourbon.jpg" name="bild" alt="bourbon" style="display:none">
Müsste es nicht auf der selben weise funktionieren?Es kommt jetzt darauf an, wie du es gelöst hast. Willst du alle Elemente mit dem selben Name anzeigen lassen, oder nur das erste? Für letzteres würde der Code so aussehen:
document.getElementsByName("bild")[0].style.display = "block";Ansonsten müsstest du natürlich mit einer Schleife durch das Array laufen, und diese Anweisung für jedes Element durchführen.
Grüße Marco
-
-
-
-
-
-
-
-
-
[latex]Mae govannen![/latex]
habe ich das Bild falsch definiert?
im HTML habe ich überhaupt kein img-Tag gefunden.
Muß eigentlich auch nicht, schließlich wurde mit
bild = new Image(100,60)das entsprechende Bild-Objekt bereits erzeugt. Der einzige Schritt, der hier noch getan werden muß, ist genau dieses Bild-Objekt bei Zutreffen der gewünschten Bedingungx>=0.5mit appendChild() oder ähnlichem an der gewünschten Stelle ins Dokument einzuhängen.Es müßte, falls der OP damit nicht zurechtkommt jetzt nur noch geklärt werden, wo genau dieses Bild erscheinen soll.
Stur lächeln und winken, Männer!
Kai
-