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

[FRAGE] Bild als Button benutzen

T

thegherkin

New member
Hallo,
Ich möchte gerne ein Bild als Button verwenden,aber der "normale" Code funktioniert anscheinend nur bei Text.
Wie kann man es hinbekommen das man das Bild als Button nimmt?


Das ist der Code.
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
       
<html>
<head>

</head>

<script type="text/javascript">

window.onload = start;

function start (){

		document.getElementById("Bild1").onclick = klickverarbeitung;
		}
		
function klickverarbeitung () {

			document.getElementById("Bild1").innerHTML += "Hallo Welt ;)";
			}

</script>
<body>



<img id="Bild1"  src="basketball.jpg" >



</body>
</html>


eigentlich sollte wenn man auf das Bild klickt "Hallo Welt;)" neben den Bild erscheinen.
wenn man anstatt ein Bild einen Text nimmt funktioniert es ja auch,also frag ich mich wieso es mit einen Bild nicht geht?


Danke schon im Voraus ;)
 
document.getElementById("Bild1").innerHTML geht nicht, weil img kein HTML enthält. Mach ein div drum herum und dann auf das div ein appendChild
 
Um das img ein div machen oder wo?

sorry ich habe erst vorgestern angefangen mit javascript und schau manchmal noch nicht wirklich durch :)
 
Du erzeugst einen container und hängst ihn in das äußere neue div mit ein.

var cont = document.createElement('div');
cont.innerHTML = 'Hallo Welt';
document.getElementById('aeusseresdiv').appendChild(cont);

Und immer die Konsole (F12) im Auge behalten, wenn du dich mit JS beschäftigst!
 
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
       
<html>
<head>

</head>

<script type="text/javascript">

window.onload = start();

function start (){

		document.getElementById("Bild1").onclick = klickverarbeitung;
		}
		
function klickverarbeitung () {
var cont = document.createElement('div');
cont.innerHTML = 'Hallo Welt';
			document.getElementById('aeuseresdiv').appendChild(cont)
			}

</script>
<body>


<div id="aeuseresdiv">
<img id="Bild1"  src="basketball.jpg" >
</div>


</body>
</html>
 
Zuletzt bearbeitet von einem Moderator:
Bei mir stehen diese Fehlermeldungen:

[11:47:46.176] Die Zeichenkodierung des HTML-Dokuments wurde nicht deklariert. Das Dokument wird in manchen Browser-Konfigurationen mit verstümmeltem Text dargestellt, wenn das Dokument Zeichen außerhalb des US-ASCII-Bereichs enthält. Die Zeichenkodierung der Seite muss im Dokument oder Transferprotokoll deklariert werden. @ file:///C:/Users/Anwender/Desktop/test/bsp.html

[11:47:46.720] TypeError: document.getElementById(...) is null @ file:///C:/Users/Anwender/Desktop/test/bsp.html:22
 
Ich weiß halt gerade nicht wo ich das:
HTML: 
var cont = document.createElement('div');
cont.innerHTML = 'Hallo Welt';
document.getElementById('aeusseresdiv').appendChild(cont);
einfügen soll....
 
Ich habs dir doch eingefügt in Beitrag #7 in den Code.
Und die andere Meldung bezieht sich auf den DOCTYPE, vielleicht ist der falsch. Wo hast du den denn her?
 
Also der Code sieht aktuell so aus:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
       
<html>
<head>

</head>

<script type="text/javascript">

window.onload = start;




function start (){

		document.getElementById("Bild1").onclick = klickverarbeitung;
		}
		
function klickverarbeitung () {

			document.getElementById(Bild1).appendChild(cont)
			}
			
			

var cont = document.createElement("div");
cont.innerHTML = "Hallo Welt"';

</script>
<body>


<div>
<img id="Bild1"  src="basketball.jpg" >
</div>


</body>
</html>


Und wenn ich die seite so aufrufe und auf das Bild klicke dann passiert nichts,eigentlich sollte dann ja "Hallo Welt" erscheinen.


Ich weiß ja auch nicht genau wo ich
HTML: 
var cont = document.createElement('div');
cont.innerHTML = 'Hallo Welt';
document.getElementById('aeusseresdiv').appendChild(cont);
einfügen soll.


Entschuldigung das ich mich ein wenig blöd anstelle.
 
Entschuldige, ich meinte die ganze Zeit Beitrag #8, nicht 7. Nimm mal den Code da raus, der sollte laufen.
 
Nicht schlimm.

Ich habe den Code jetzt so eingefügt aber es funktioniert trotzdem nicht?

Irgendwie blick ich jetzt garnicht mehr durch.
 
Also wenn ich auf einen Online Debugger gehe dann sagt er mir das der Doctype fehlerhaft ist.
Nun habe ich aber schon 5 stück ausprobiert und es ging bei jeden einzelnen nicht...?
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben