Problem mit JavaScript

Hallo ich hab folgendes Programm geschrieben:

<html>
<img id=bild src="b.bmp"  onClick="SetPos()">

<script>

var points=0;

function Delay(prmSec)
  {
  prmSec *= 1000;
  var eDate = null;
  var eMsec = 0;
  var sDate = new Date();
  var sMsec = sDate.getTime();

  do {
      eDate = new Date();
      eMsec = eDate.getTime();

  } while ((eMsec-sMsec)<prmSec);
}

function SetPos( )
{
	x = 1 + 400*(Math.random());
	x= Math.round(x);
	y = 1 + 400*(Math.random());
	y= Math.round(y);

	node = document.getElementById("bild");
	node.style.position = "absolute"; 
	node.style.left = x;
	node.style.top = y;

        points++;

}

Delay(30);
document.write("Punkte: ",points);

</script>

</html>

Ich will jetzt das man 30Sekunden Zeit hat das Bild anzuklicken bei jedem klick auf das Bild soll die points Variable um 1 erhöht werden am Ende soll dann eine Punktzahl ausgeben werden.

Aber so funktioniert es natürlich nicht ...
Das Script wartet 30 Sekunden gibt den Text aus und anschließend kann ich auf das Bild klicken.

Wie kann man das Problem mit JavaScript lösen?

TheChrissy

Hallo,

deine Schleife blockiert das Programm, weshalb erst die 30 Sekunden "abgewartet" werden und dann erst das Bild sichtbar wird.

Es gibt aber schon eine fertige Funktion, die nach einer bestimmten Zeit eine beliebige Funktion aufruft.

http://www.w3schools.com/js/js_timing.asp

Dein Programm würde dann so aussehen:

<!DOCTYPE html>
<html>
	<script>
        var points = 0;

        function end()
        {
          	document.write("Punkte: ", points);
        }

        function SetPos()
        {
            x = 1 + 400*(Math.random());
            x= Math.round(x);
            y = 1 + 400*(Math.random());
            y= Math.round(y);

            node = document.getElementById("bild");
            node.style.position = "absolute";
            node.style.left = x +"px";
            node.style.top = y +"px";

            points++;
        }
    </script>

	<body onLoad="setTimeout('end()', 30000);">
		<img id="bild" src="b.bmp" onClick="SetPos();">
	</body>
</html>

Gruß Christopher