Html und Javascritp Gif ein und ausblenden lassen?
Ich möchte mit Html und Javascript ein Gif per button einfügen lassen. Ich habe schon einiges ausprobiert aber es funktioniert nicht, ich würde mich gerne über Hilfe freuen. (Die Aufgabe war es einen Kopfrechentrainer zu programmieren, als Zusatz ein Bild einfügen,...)
<html>
<head>
<title> Kopfrechentrainer Ultimate </title>
</head>
<body>
<script language=javascript>
{ var a;
var b;
var c;
var d;
var f=0;
var r=0;
var x;
}
function random()
{
a=Math.floor(Math.random()*90)+10;
document.rechnen.eingabe1.value=a;
b=Math.floor(Math.random()*9)+1;
document.rechnen.eingabe2.value=b;
}
function kontrolle()
{
c=document.rechnen.vergleich.value;
if(a*b==c){r++;document.rechnen.richtig.value=""+r}
if(a*b!=c){f++;document.rechnen.falsch.value=""+f}
if(r+f==50)
{
if(r==0){alert('soos')}
else if(0<r<=10){alert('saas')}
else if(10<r<=20){alert('sees')}
else if(20<r<=30){alert('siis')}
else if(30<r<=40){alert('suus')}
else if(40<r<=50){alert('fiif')}
}
}
function zurück()
{
document.rechnen.richtig.value=""
document.rechnen.falsch.value=""
}
function shutdown()
{
window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ');
}
function bka()
{
var audio = new Audio('sirene.mp3');
audio.play();
document.getElementById("bkaf").style.display="none";
}
</script>
<font color ="red"> <h2 align = center> Kopfrechentrainer Ultimate </h2> </font>
<br>
<p align = center> <b>
Du kannst hier Multiplikationsaufgaben üben. <br>
Beim Klicken auf den Button werden dir dir nacheinander 50 Aufgaben gestellt.
</p> </b>
<br>
<br>
<h1 align = center> Bereit? </h1>
<br>
<form name="rechnen">
<input type=button value="Start" onclick=random()>
<br> <br>
<INPUT type=text name=eingabe1 value=""> *
<INPUT type=text name=eingabe2 value=""> =
<INPUT type=text name=vergleich value="">
<input type=button value="Kontrolle" onclick=kontrolle()>
<input type=button value="Zurücksetzen" onclick=zurück()>
<br> <br>
<p align = center> <b>
Richtig gelöst Falsch gelöst
</b>
<br> <br>
<INPUT type=text name=richtig value="">
<INPUT type=text name=falsch value="">
<br> <br>
<input type=button value="shutdown" onclick=shutdown()>
<br> <br>
<input type=button value="BKA Modus" onclick=bka()>
<audio autoplay>
<source src="sirene.mp3" type="audio/mpeg">
</audio>
<br>
<div id="bkaf">
<img id="blaulicht" src="blaulicht.gif">
</div>
</form>
</body>
</html>
2 Antworten
Zum Icon / Button: Die Reihenfolge der Zustände ist falsch. Dein Icon (bzw. dessen Container) muss anfangs ausgeblendet werden (display: none) und in der Funktion wird er eingeblendet.
HTML:
<div id="bkaf" style="display:none">
<img alt="Blaulicht" id="blaulicht" src="blaulicht.gif">
</div>
Im JavaScript:
document.getElementById("bkaf").style.display = "block";
Für einen ständigen Wechsel wäre eine Verzweigung praktisch.
const blaulichtBox = document.getElementById("bkaf");
if (blaulichtBox.style.display === "block") {
blaulichtBox.style.display = "none";
}
else {
blaulichtBox.style.display = "block";
}
Noch ein paar Anmerkungen zu deinem aktuellen HTML: Dieses ist durch und durch mit Fehlern durchsetzt. Es fehlt ein Doctype (oberste Zeile):
<!doctype html>
du verwendest zahlreiche Elemente/Attribute, die nicht zum HTML5-Standard gehören (font, align), Tags werden nicht geschlossen und dem Bild fehlt ein alt-Attribut (es beschreibt das Bild textuell; oben habe ich es bereits ergänzt).
Wirf das font-Element raus. Ersetze es folgendermaßen:
<h2 style="color:red; text-align:center"> Kopfrechentrainer Ultimate</h2>
Über das style-Attribut können CSS-Properties eingebunden werden. Mit CSS werden Elemente auf der Webseite äußerlich beschrieben. Es ist nicht die Aufgabe von HTML, dies zu tun, deshalb gab es vor über zehn Jahren noch einmal eine ganz deutliche Abkehr von Tags wie font oder Attributen wie align.
CSS könnte man, nur als Randbemerkung, noch anders in ein Dokument einbinden. Wenn du Interesse daran hast, lies Weiteres hier.
In obiger Korrektur siehst du auch gleich, wie das align-Attribut ersetzt werden sollte. Beachte des Weiteren, dass der Paragraph nach dem b-Tag geschlossen wird.
<p style="text-align:center">
<b>Du kannst (...)</b>
</p>
Hinsichtlich deines JavaScript-Codes würde ich stets dazu raten, eindeutige/passende und ausdrucksstarke Bezeichner zu verwenden. Dann ist beim Lesen des Codes jederzeit klar, wofür Variable X oder Y gerade steht.
Wieso du die Deklaration deiner Variablen in einem Block vornimmst, ist für mich nicht ersichtlich. Lass ihn doch einfach weg.
Vielen ank für deine Antwort, du hast mir echt weitergeholfen, jetzt funktioniert es. Ich werde mir deine Ratschläge zugute nehmen und mal etwas Ordnung in den Code bringen.
<body>
<div id="container"></div>
<button onclick="test()">Test</button>
<script>
function test(){
document.getElementById("container").innerHTML = '<img src="https://upload.wikimedia.org/wikipedia/commons/2/2c/Rotating_earth_%28large%29.gif" alt="">'}
</script>
</body>
Das funktioniert bei mir, versuchs halt auch mit einem link vom gif statt irgendwas herunterzuladen.
Der Code ist auch irgendwie extrem unordentlich, du mischst alles miteinander