onClick bei input button macht nichts
0 0 0 
molily
0 
Der Martin
0
0
onClick bei input button macht nichts
Hallo Forum.
Ich versuche einen einfachen Timer zu erstellen, der die Zeit runterzählt. Dabei soll man in ein Textfeld die Zahl der Minuten eingeben und wenn man auf einen Button klickt soll der Countdown beginnen. Ich habe soweit hinbekommen, dass alles am richtigen Platz erscheint und auch korrekt aussieht. Allerdings funktioniert der Aufruf meiner Javascript-Funktion nicht richtig.
Meine html-Datei "Timer.html":
<html>
<head>
<title>Timer</title>
<style>
body {
width: 125px;
height: 50px;
background: url('Hintergrund.png');
}
</style>
<script type="text/javascript" src="js/timer.js"></script>
</head>
<body scroll="no">
<div style="width: 100%; height: 100%; text-align: right; vertical-align: middle;">
<input onClick="Start();" type="submit" value="X" style="width: 30pt; height: 22pt; font-size: 18pt; background: transparent; color: white; border-style: none;" />
<input type="text" id="minutes" size="2" maxlength="2" value="05" style="margin: -2px; width: 21pt; font-size: 18pt; background: transparent; color: white; border-style: none;" />
<input type="text" size="1" maxlength="1" readonly value=":" style="margin: -2px; width: 7pt; font-size: 18pt; background: transparent; color: white; border-style: none;" />
<input type="text" id="seconds" size="2" maxlength="2" readonly value="00" style="margin: -2px; width: 21pt; font-size: 18pt; background: transparent; color: white; border-style: none;" />
</div>
</body>
</html>
und meine Scriptdatei "timer.js":
var seconds = 600;
function Start() {
alert("Start");
seconds = document.getElementById("minutes").value.toInt() * 60;
if(seconds > 0) setTimeout("CountDown()", 1000);
}
function CountDown() {
alert("CountDown");
seconds--;
var m = Math.floor(seconds / 60);
if(m > 9) document.getElementById("minutes").value = m;
else document.getElementsById("minutes").value = "0"+m;
var s = seconds % 60;
if(s > 9) document.getElementById("seconds").value = s;
else document.getElementById("seconds").value = "0"+s;
if(seconds > 0) setTimeout("CountDown()", 1000);
}
Wie gesagt, es tut sich nichts wenn ich auf den Button klicke. Kann jemand Fehler entdecken? Danke schonmal
-
<input onClick="Start();" type="submit" value="X" ...
sinnvoller wäre hier type="button", denn du hast hier gar kein Formular zum Absenden!
document.getElementById("minutes").value.toInt() * 60;
Meinst du hier parseInt()? toInt() ist mir unbekannt.
-
Danke für die Vorschläge. Funktioniert leider immer noch nicht.
-
Hallo,
Danke für die Vorschläge. Funktioniert leider immer noch nicht.
Mit dieser Nichtbeschreibung kann man dir auch nicht weiterhelfen. Schau am besten mal in der JavaScript-Konsole vom Firefox (Menü Extras > Fehler-Konsole), denn mit großer Wahrscheinlichkeit bricht dein Script mit einem Fehler (und einer Fehlermeldung, die du näher betrachten solltest) ab.
Zum Beispiel mit dieser, die einen Schreibfehler anzeigt:
document.getElementsById is not a function
if(s > 9) document.getElementsById("seconds").value = s;
^^^Im Übrigen: Hast du beachtet, dass parseInt() keine Methode von String-Objekten ist? Du kannst nicht etwa document.getElementById("minutes").value.parseInt() schreiben, sondern musst parseInt(document.getElementById("minutes").value) schreiben.
Mathias
-
-
-
Hallo,
<input onClick="Start();" type="submit" value="X" style="[removed]" />
schreibst du HTML oder XHTML? In HTML wäre der Schrägstrich am Schluss falsch, in XHTML wäre es wichtig, das Attribut onclick auch richtig zu schreiben (HTML ist da toleranter).
function Start() {
alert("Start");
seconds = document.getElementById("minutes").value.toInt() * 60;
if(seconds > 0) setTimeout("CountDown()", 1000);
}Das sieht eigentlich richtig aus, obwohl auch ich das toInt() eigenartig finde. Durch die nachfolgende Multiplikation wird der Wert automatisch in einen Zahlenwert konvertiert; eine explizite Umwandlung ist hier nicht nötig. Ich würd's weglassen.
Wie gesagt, es tut sich nichts wenn ich auf den Button klicke. Kann jemand Fehler entdecken?
Ja, vermutlich dein Browser. Wenn bei diesem Code "nichts" passiert, muss eine Javascript-Fehlermeldung kommen. Wie lautet sie? Auf welche Zeile verweist sie?
zu deinem HTML/CSS hätte ich auch noch so einiges anzumerken, was aber auf die Funktion des Scripts keinen Einfluss hat. Zum Beispiel fehlt ein DOCTYPE.
Grundsätzlich: Inline-Styles sollte man vermeiden! Sie machen den Code unübersichtlich und schwer zu warten. Du hättest zumindest uns einen Gefallen tun können, wenn du die Inline-Styles, die ja mit der *Funktion* des Codes nichts zu tun haben, hier im Posting weggelassen hättest. Das macht den Codeauszug schon mal wesentlich übersichtlicher.
<style>
Hier fehlt das Attribut type="text/css".
body {
width: 125px;
height: 50px;
background: url('Hintergrund.png');
}Huch? Du machst das body-Element klein? Zulässig, aber ungewöhnlich. ;-)
<input onClick="Start();" type="submit" value="X" style="width: 30pt; height: 22pt; font-size: 18pt; background: transparent; color: white; border-style: none;" />
Warum definierst du erst die Größe des body in px, die Größe der Elemente darin aber in pt? Das passt doch irgendwie nicht zusammen. Zumindest *kann* das zu Darstellungsproblemen führen, da zwischen px und pt kein eindeutiger Zusammenhang besteht.
Zudem ist pt für Bildschirmausgaben nicht besonders geeignet, weil die tatsächliche Schriftgröße dann von vielen Unwägbarkeiten abhängt, wie etwa der Bildschirmauflösung und anderen Einstellungen des Grafiktreibers.
Wenn du die Schriftgröße wirklich flexibel halten möchtest, sind em oder % als Einheit empfehlenswert; wenn du sie auf einen fixen Wert setzen willst, verwende px. Die Einheit pt ist höchstens in einem Print-Stylesheet zu empfehlen, dort ist sie so fest und exakt definiert wie px auf dem Bildschirm.So long,
Martin--
Ein guter Lehrer muss seinen Schülern beibringen können,
eine Frage so zu stellen, dass auch der Lehrer lernen muss,
um die Frage beantworten zu können.
(Hesiod, griech. Philosoph, um 700 v.Chr.)-
Ich sollte wohl noch sagen, dass das ein Widget für die Vista-Sidebar ist. Darum verkleinere ich den Body auch so extrem. Es kommt auch keine Fehlermeldung was wohl auch daran liegen könnte, dass das als Widget ausgeführt wird. Es tut sich tatsächlich _nichts_ wenn ich klicke, nicht mal eine Fehlermeldung.
Da das Widget nur für mich ist, habe ich auch nicht drauf geachtet, dass es browserunabhängig oder leicht zu warten ist. Das mit den pt und px werde ich jedoch beherzigen.
Wie genau muss onlick denn aussehen, wenn es XHMTL-konform sein soll?
-
Hallo,
Ich sollte wohl noch sagen, dass das ein Widget für die Vista-Sidebar ist. Darum verkleinere ich den Body auch so extrem.
gut, das ist ja auch in Ordnung. :-)
Es kommt auch keine Fehlermeldung was wohl auch daran liegen könnte, dass das als Widget ausgeführt wird. Es tut sich tatsächlich _nichts_ wenn ich klicke, nicht mal eine Fehlermeldung.
Dann würde ich dir zum Debuggen dringend empfehlen, das Ding erstmal ganz normal im Browser zu testen. Wenn's da läuft, kannst du es auch "als Widget ausführen", was immer das ist.
Wie genau muss onlick denn aussehen, wenn es XHMTL-konform sein soll?
Jedenfalls klein geschrieben, wie alle Tags und Attribute. Nicht mit einem großen 'C' in der Mitte, und auch nicht mit einem vergessenen 'c' wie jetzt gerade. ;-)
Ciao,
Martin--
Lache, und die Welt wird mit dir lachen.
Schnarche, und du schläfst allein.-
Nachdem ich es im Browser laufen ließ und ich da auch die Unterstützung durch alerts hatte, habe ich den Fehler schnell lokalisiert. Danke für die Hilfe.
-
-
-
-
Fehler gefunden. Bei einer der Funktionen getElementByID hatte sich ein s eingeschlichen.