button der variable ändert

rotmilan

Mitglied
Hallo,

könnt ihr mir bitte sagen wie ich ein Button erstelle wobei durch klick eine variable geändert wird.

mfg rotmilan
 
hi,

also das klappt wohl aber ich muss da wohl noch was ändern.

Die Variable current soll in der funktion nextone eins höher gesetzt werden und zwar nicht nur nach ablauf der Zeit sondern auch nach drücken des Button.

Das ist die Funktion (wenn ich den code benutzen will geht nur die Bildlaufleiste nach oben!)

var current = 1;
var amount = 8;

function nextOne() {

document.getElementById("content" + current).style.display = "none";
current ++;
document.getElementById("content" + current).style.display = "block";

//setTimeout('nextOne()', zeiten[current]);
if(current == 2)
time(<? echo $cook_daten[1]; ?>);
if(current == 3)
time(<? echo $cook_daten[2]; ?>);
if(current == 4)
time(<? echo $cook_daten[3]; ?>);
if(current == 5)
time(<? echo $cook_daten[4]; ?>);
if(current == 6)
time(<? echo $cook_daten[5]; ?>);
if(current == 7)
time(<? echo $cook_daten[6]; ?>);
if(current == 8)
time(<? echo $cook_daten[7]; ?>);
}

und hier wird der Button angewendet:

<form action="index.php" method="$_GET">
<div id="content1" style="display:block"; width:320px; height:240px">Hier ist das erste Kapitel<br>
<br> <? if( $cook_daten[8] == leicht)echo '<img src="iq09a.gif" alt="watt">&nbsp;&nbsp;&nbsp;&nbsp;<img src="iq09b.gif" alt="watt">'; ?>
<br> <? if( $cook_daten[8] == mittel)echo '<img src="iq10a.gif" alt="watt">&nbsp;&nbsp;&nbsp;&nbsp;<img src="iq10b.gif" alt="watt">'; ?>
<br> <? if( $cook_daten[8] == schwer)echo '<img src="iq11a.gif" alt="watt">&nbsp;&nbsp;&nbsp;&nbsp;<img src="iq11b.gif" alt="watt">'; ?>

<br>a:<input type="radio" name="a1" value="a">b:<input type="radio" name="a1" value="b">
c:<input type="radio" name="a1" value="c">d:<input type="radio" name="a1" value="d"><br><br>
<input type="button" onclick="current='2';" value="weiter"> // genau hier später soll für jeden Bereich ein Button da sein.


</div>

<div id="content2" style="display:none"; width:320px; height:240px">Hier ist das zweite Kapitel</div>
<div id="content3" style="display:none"; width:320px; height:240px">Hier ist das dritte Kapitel</div>
<div id="content4" style="display:none"; width:320px; height:240px">Hier ist das vierte Kapitel</div>
<div id="content5" style="display:none"; width:320px; height:240px">Hier ist das fünfte Kapitel</div>
<div id="content6" style="display:none"; width:320px; height:240px">Hier ist das sechste Kapitel</div>
<div id="content7" style="display:none"; width:320px; height:240px">Hier ist das siebte Kapitel</div>
<div id="content8" style="display:none"; width:320px; height:240px">Hier ist das achte Kapitel</div>
<div id="content9" style="display:none"; width:320px; height:240px">Der Test ist beendet</div>

</form>

mfg rotmilan
 
Dann ruf doch die Funktion im Button auf.

Optimalerweise solltest du den Timeout in einer variablen speichern und zu Beginn der Funktion ersmal mittels clearTimeout() löschen.... damit der "automatische" Funktionaufruf nicht dazwichenfunkt.
 
hi,

also ich hab die Funktion time jetzt so:

tim = 0;

function time(gets){
clearTimeout(tim);
tim = setTimeout('nextOne()',gets);
}

und den button so:

<input type="button" onclick="current='2',time();" value="weiter">

und das klappt.

thx mfg rotmilan
 
hi,

also er schaltet zwar zum nächsten Kapitel aber die Zeit die jenes Sichtbar bleiben soll ist nicht mehr richtig.

Code:
<input type="button" onclick="current='1',nextOne();" value="weiter">


function nextOne() 
{
  document.getElementById("content" + current).style.display = "none";
	current ++;
// an dieser Stelle sagt mir der Explorer immer das ein Objekt erwartet wird.document.getElementById("content" + current).style.display = "block";
	
  if(current == 2)
	time(<? echo $cook_daten[1]; ?>);
	if(current == 3)
	time(<? echo $cook_daten[2]; ?>);
	if(current == 4)
	time(<? echo $cook_daten[3]; ?>);
	if(current == 5)
	time(<? echo $cook_daten[4]; ?>);
	if(current == 6)
	time(<? echo $cook_daten[5]; ?>);
	if(current == 7)
	time(<? echo $cook_daten[6]; ?>);
	if(current == 8)
	time(<? echo $cook_daten[7]; ?>);
}

also mein Ziel ist es das nach dem klick das nächste Kapitel sichtbar wird und die gegebene Zeit auch sichtbar bleibt.

mfg rotmilan
 
hallo,

den vorigen tipp konnte ich leider nicht richtig umsetzen vielleicht kann nochmal jemand daruauf eingehen falls es daran liegen könnte.

ich möchte gern das durch klicken des weiter button zum nächsten Thema gewechselt wird das geschieht auch nur die Zeit wird dann nicht mehr eingehalten, sie verläuft viel zu schnell.

die function hab ich so umgestllt was leider nicht viel gebracht hat .

Code:
function nextOne() 
{
  document.getElementById("content" + current).style.display = "none";
	current ++;
	document.getElementById("content" + current).style.display = "block";
	
  if(current == 2)
	window.setTimeout('nextOne()',<? echo $cook_daten[1]; ?>);
	if(current == 3)
	window.setTimeout('nextOne()',<? echo $cook_daten[2]; ?>);
	if(current == 4)
  window.setTimeout('nextOne()',<? echo $cook_daten[3]; ?>);
	if(current == 5)
	window.setTimeout('nextOne()',<? echo $cook_daten[4]; ?>);
	if(current == 6)
	window.setTimeout('nextOne()',<? echo $cook_daten[5]; ?>);
	if(current == 7)
	window.setTimeout('nextOne()',<? echo $cook_daten[6]; ?>);
	if(current == 8)
  window.setTimeout('nextOne()',<? echo $cook_daten[7]; ?>);

der button sieht so aus:

<input type="button" onclick="current='1';nextOne();" value="weiter">


}


mfg rotmilan
 
Sven Mintel hat gesagt.:
Optimalerweise solltest du den Timeout in einer variablen speichern und zu Beginn der Funktion ersmal mittels clearTimeout() löschen.... damit der "automatische" Funktionaufruf nicht dazwichenfunkt.

....dies hast du nicht gemacht... das starten eines neuen Timeouts beendet nicht gezwungenermassen einen bereits gestarteten.
Somit hast du mehrere Timeouts am Laufen...

Hier mal nen Beispiel, wie es aussehen könnte:
Code:
<?php
 $cook_daten=array(0,10000,12000,13000,14000,33000,16000,17000,18000,19000,22222);
?>

<html>
<head>
<title>Test</title>
<style type="text/css">
<!--
    div.content{display:none;width:320px; height:240px;}
    div.show{display:block;}
-->
</style>
</head>
<body>
<form action="index.php"><input type="button"onclick="next_one(0)"value="weiter"><span>&nbsp;</span>
    <div class="content show">Hier ist das erste Kapitel</div>
    <div class="content">Hier ist das zweite Kapitel</div>
    <div class="content">Hier ist das dritte Kapitel</div>
    <div class="content">Hier ist das vierte Kapitel</div>
    <div class="content">Hier ist das fünfte Kapitel</div>
    <div class="content">Hier ist das sechste Kapitel</div>
    <div class="content">Hier ist das siebte Kapitel</div>
    <div class="content">Hier ist das achte Kapitel</div>
    <div class="content">Der Test ist beendet</div>
</form>
<script type="text/javascript">
<!--

function next_one(timer)
{
    objForm = document.forms[0];
    if(!document.getElementById) return;
    if(current < cookdaten.length-1)clearTimeout(objTimeout);
        
    if(timer)
        {
            if(intMSecs >= 1000)
                {
                    intMSecs  -= 1000;
                    objTimeout = window.setTimeout('next_one(1)', 1000);
                }
             else
                {
                    objTimeout = window.setTimeout('next_one(0)', 1);
                }
        }
        
    else if(current < cookdaten.length)
        {
            objForm.getElementsByTagName('div')[current].style.display = 'none';
            current++;
            objForm.getElementsByTagName('div')[current].style.display = 'block';
            intMSecs = cookdaten[current];
            objTimeout = window.setTimeout('next_one(1)',1000);
            if(current == cookdaten.length-1) objForm.elements[0].disabled = true;
        }
     
    objForm.getElementsByTagName('SPAN')[0].firstChild.nodeValue =
                                            (current==cookdaten.length)
                                                ? ''
                                                : ' noch '+intMSecs/1000+ ' Sekunden';
    
}
var current    = 0,
    cookdaten  = new Array(<?php echo implode(',',array_slice($cook_daten,1,8))?>),
    intMSecs   = cookdaten[0],
    objTimeout = window.setTimeout('next_one(true)',1000);
//-->
</script>
</body>
</html>
($cook_daten kannst du ja rausnehmen und durch deinen ersetzen... Button gibts nur einen für alle Tests)

http://doktormolle.de/temp/cook.php
 
hallo sven,

danke erstmal für deine schnelle und gute Antwort.

ich konnte Sie leider noch nicht in meinem script zum Laufen bringen, besser gesagt sobald nextone aufgerufen wird stürtzt der explorer ab.

Wozu dient bitte diese Zeile es wenn es nicht byid ist soll die funktion abgebrochen werden?

Code:
    if(!document.getElementById) return;

forms[0] ist bei mir die eins, ich hoffe ich hab das richtig verstanden da ich noch eine andere Form auf der Seite hab.

ansonsten ist eigentlich alles ziemlich klar, nur leider funktioniert es bei mir noch nicht.

So sieht jetzt ein div bei mir aus:

Code:
<form action="index.php"><input type="button"onclick="next_one(0)"value="weiter" name="but"><span>&nbsp;</span>

<div class ="content show">Hier ist das erste Kapitel
<br> <? if( $cook_daten[8] == leicht)echo '<img src="iq09a.gif" alt="watt">&nbsp;&nbsp;&nbsp;&nbsp;<img src="iq09b.gif" alt="watt">'; ?>
<br> <? if( $cook_daten[8] == mittel)echo '<img src="iq10a.gif" alt="watt">&nbsp;&nbsp;&nbsp;&nbsp;<img src="iq10b.gif" alt="watt">'; ?>
<br> <? if( $cook_daten[8] == schwer)echo '<img src="iq11a.gif" alt="watt">&nbsp;&nbsp;&nbsp;&nbsp;<img src="iq11b.gif" alt="watt">'; ?>

<br>a:<input type="radio" name="a1" value="a">b:<input type="radio" name="a1" value="b">
c:<input type="radio" name="a1" value="c">d:<input type="radio" name="a1" value="d"><br><br>
</div>

was könnte ich falsch gemacht haben ?

mfg rotmialen
 
hi,


also der totale Absturz beruht wohl darauf das ich den ie angewiesen habe die scriptfehler anzuzeigen wobei auch nur ein fehler in der ersten zeile gemeldet wurde oder auch in zusammenhang mit getElementByTagName() objekt erforderlich.

Und der Rest lag wohl daran das es sich um document.forms[2] handelt.

Bis dann

mfg rotmilan
 

Neue Beiträge

Zurück