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

[FRAGE] Funktion erst nach mehreren Klicks ausführen

D

derunglaubliche

New member
Hallo
Hab mal ne Frage und gerade keinen Plan wie ich es machen soll

Wie kann ich eine Funktion erst dann ausführen lassen wenn z.B. 5 mal in einer bestimmten Zeit auf einen div Bereich geklickt wurde?

Schonmal Danke
 
Du könntest mit onClick () eine globale Variable hochzählen und mittels Date-Objekt die Zeit abgleichen. Dann einfach mit if fragen, ob die Variable größer 5 UND die vergange Zeit (erneut via Date) im Rahmen ist.

Code: 
Z=0;
Datum = newDate (); StundeAlt=Datum.getHours ();

Function test ()
{
StundeNeu=Datum.gerHours ();
If (Z > 5 && (StundeNeu - StundAlt > 1)
...
Else Z++
}

< a href="" onClick="test ()"> test </a>

Nicht schön aber als Input reichts, oder?
 
Zuletzt bearbeitet:
... nur, wenn Du bitte "onclick()" nimmst und die eine oder andere Schreibweise direkt verbannst (bspw. "Function", "Else", fehlende "var"s)! ;) *Korinthenmodus off*
 
Vielen Dank. Bin schonmal ein gutes Stück weiter als vorher :D
aber läuft irgendwie trotzdem nicht.
habs jetz erst mal ohne die Zeit probiert, aber das geht auch nicht.
Bekomme schon beim ersten klick die Meldung 5 Klicks
Code: 
      var counter = 0;

      function hochzaehlen(){
        if (counter=5) {
          alert("5 Klicks");
        }
        else counter++;
      }
 
@SteelWheel du hast die globalen Variablen vergessen!!! *lach*

@derunglaubliche: Mit Codefetzen können wir nicht viel anfangen! Zeig mal ein Minibeispiel und lass das mit der globalen Variable!

Auf die schnelle fällz mir sowas hier ein:
Code: 
<!DOCTYPE html>
<html lang="de">
<head>
	<!-- UTF-8 Prüfkommentar -->
	<title>Testseite</title>
	<!-- META -->
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<!-- Stylesheet -->
	<style>
		div {
			font-size: 5em;
			text-align: center;
			float: left;
			cursor: pointer;
		}
		div.red {
			background-color: red;
			width: 100px;
			height: 100px;
		}
		div.green {
			background-color: green;
			width: 100px;
			height: 100px;
		}
	</style>
	<!-- JavaScript -->
	<script>
	function addEvent(obj, type, fn ) {
		if (obj.addEventListener) {
			obj.addEventListener(type, fn, false );
		} else if (obj.attachEvent) {
			obj["e"+type+fn] = fn;
			obj[type+fn] = function() {
				obj["e"+type+fn]( window.event );
			}
			obj.attachEvent('on' + type, obj[type + fn]);
		}
	}

	function countClick() {
		var now = new Date().getTime(),
			time = this.time || 0,
			count = this.count || 0,
			timeDiff = now - time;

		console.log(this.className);
		if (time === 0) {
			this.time = now;
			this.count = 1;
			this.innerHTML = 1;
			return;
		}

		count += 1;
		if (count >= 5) {
			if (timeDiff <= 2000) {
				this.innerHTML = count;
				alert('Geschafft innerhalb ' + (timeDiff / 1000) + ' Sekunden.');
			} else {
				alert('Das war zu langsam !!!');
				this.innerHTML = 0;
			}
			this.time = 0;
			this.count = 0;
		} else {
			this.count = count;
			this.innerHTML = count;
		}
	}

	function init() {
		var i,
			divs = document.getElementsByTagName('div');
			divsLength = divs.length;

		if (divsLength < 0) {
			return;
		}

		for (i = 0; i < divsLength; i += 1) {
			addEvent(divs[i], 'click', countClick);
			divs[i].innerHTML = 0;
		}
	}

	window.onload = init;
	</script>
</head>

<body>
	<h1>Klicke innerhalb 2 Sekunden 5 Mal auf eine Fläche !!!</h1>
	<br />
	<div class="red"></div>
	<div class="green"></div>
	<div class="red"></div>
	<div class="green"></div>
	<div class="red"></div>
	<div class="green"></div>
	<div class="red"></div>
	<div class="green"></div>
</body>
</html>
 
Ja das trifft schon fast was ich will. Danke :D
Aber wie kann ich es umändern dass die funktion nicht auf divs sondern auf eine id reagiert?

Hier mal mein code:
PHP: 
<?php
defined( '_JEXEC' ) or die;?>
<?php echo '<?'; ?>xml version="1.0" encoding="<?php echo $this->_charset ?>"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
  <head>
    <jdoc:include type="head" />
    <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
    <script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/script.js"></script>
<script>
  function addEvent(obj, type, fn ) {
    if (obj.addEventListener) {
      obj.addEventListener(type, fn, false );
    } else if (obj.attachEvent) {
      obj["e"+type+fn] = fn;
      obj[type+fn] = function() {
        obj["e"+type+fn]( window.event );
      }
      obj.attachEvent('on' + type, obj[type + fn]);
    }
  }

  function countClick() {
    var now = new Date().getTime(),
      time = this.time || 0,
      count = this.count || 0,
      timeDiff = now - time;

    console.log(this.className);
    if (time === 0) {
      this.time = now;
      this.count = 1;
      this.innerHTML = 1;
      return;
    }

    count += 1;
    if (count >= 5) {
      if (timeDiff <= 2000) {
        this.innerHTML = count;
        alert('Geschafft innerhalb ' + (timeDiff / 1000) + ' Sekunden.');
      } else {
        alert('Das war zu langsam !!!');
        this.innerHTML = 0;
      }
      this.time = 0;
      this.count = 0;
    } else {
      this.count = count;
      this.innerHTML = count;
    }
  }

  function init() {
    var i,
      divs = document.getElementsByTagName('div');
      divsLength = divs.length;

    if (divsLength < 0) {
      return;
    }

    for (i = 0; i < divsLength; i += 1) {
      addEvent(divs[i], 'click', countClick);
      divs[i].innerHTML = 0;
    }
  }

  window.onload = init;
  </script>
  </head>
  <body>
    <div class="inhalt">
    </div>
    <div class="menu">
    </div>
    <div class="button1" id="button" onclick="toggle_visibilityinhalt('inhalt');toggle_visibilitymenu('menu');">
        <img src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/images/Home_Icon.svg" alt="Home" />
    </div>
  </body>
</html>
 
Ich hab' mir mal erlaubt, die Syntaxfehler und ein paar falsche Kleinigkeiten zu entfernen:
Code: 
var test = (function(){
	var z = 0;
	var datum = new Date();
	var stundeAlt = datum.getHours();
	return function test(){
		var stundeNeu = Datum.getHours();
		if (z > 5 && (stundeNeu - stundeAlt > 1)){
			// ...
		}
		else {
			z += 1;
		}
	};
}());

<a onclick="test()"> test </a>
- wobei die Fragestellung nicht ganz eindeutig ist. Ist die Zeitspanne vom Laden der Seite zu zählen oder zwischen dem ersten und letzten Klick?

Letzteres ist ein wenig komplizierter, da man sich für jeden Klick die Zeit merken muss:
Code: 
<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
<style type="text/css"></style>
</head>
<body>
<div id="clickArea">click</div>
<script type="text/javascript">
(function(){
	var clicks = [];
	document.getElementById("clickArea").addEventListener(
		"click",
		function(){
			var timeStamp = Date.now();
			clicks = clicks.filter(function(clickTimeStamp){
				return timeStamp - clickTimeStamp < 5 * 1000; // 5s
			});
			clicks.push(timeStamp);
			if (clicks.length >= 5){
				alert("5 clicks in 5 seconds");
				clicks = [];
			}
		},
		false
	);
}());
</script>
</body>
</html>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben