PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Online Kraslot werkt niet.

Door Bram Poulisse op 16-09-2014 14:40 gewijzigd op 16-09-2014 15:49
3.857 views
Ik ben een Online kraslot aan het maken en als ik alle vakjes heb open gekrast zou er een pop up moeten komen met een melding er in maar die komt niet. 

	
<html>
<head>
	<script language="JavaScript1.2" type="text/javascript">

		function disableselect(e)
		{
			return false 		/*disabeling selection action*/
		}
		function reEnable()
		{
			return true
		}
		document.onselectstart=new Function ("return false")
		if (window.sidebar)
		{

			document.onclick=reEnable
		}	
		function clickIE()
		{
			if (document.all)
			{
				(message);
				return false;
			}
		}
		document.oncontextmenu=new Function("return false")		
	</script>
	<meta CHARSET="UTF-8">
	
	<title>Scratch Scratch</title>

	<!-- jQuery -->
	<script type="text/javascript" src="./inc/jquery.1.7.1.min.js"></script>

	<!-- wScratchPad -->
	<script type="text/javascript" src="./wScratchPad.js"></script>
	<link rel="stylesheet" href="css/main.css">
</head>
<body>
	<div id="positie">
		<div id="nummer1">
		</div>
		<div id="nummer2">
		</div>
		<div id="nummer3">
		</div>
		<div id="nummer4">
		</div>
		<div id="nummer5">
		</div>
		<div id="nummer6">
		</div>
		<div id="nummer7">
		</div>
		<div id="nummer8">
		</div>
		<div id="nummer9">
		</div>
	</div>
	<div id="logo">
			<img src="images/logo.jpg" style="WIDTH:350; HEIGHT:200px; border: solid 3px;"/> <!--moet nog een echt logo in-->
	</div>
	<script type="text/javascript">

			var cleared = 0;

			//scratchpad1
			var images = [], 
			index = 0;

			images[0] = "images/slide1.jpg";		//de plaatjes die je kunt vrij krassen
			images[1] = "images/slide2.jpg";
			images[2] = "images/slide3.jpg";
			images[3] = "images/logo.jpg";
			images[4] = "images/winner.png";
			images[5] = "images/scratch-to-win.png";

			index = Math.floor(Math.random() * images.length);

			$('#nummer1').wScratchPad({
			  scratchMove: function (e, percent) {
				console.log(percent);
				if (percent > 70)
				{
					this.clear();
					cleared = cleared + 1;
				}
			  }
			});
			$("#nummer1").wScratchPad('bg', images[index]);
			$("#nummer1").wScratchPad('fg', 'images/overlay.png');		//de laag die je weg krast
			$("#nummer1").wScratchPad('size', '15');				//grote van het vlak dat je ineens weg krast
			$("#nummer1").wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');  //de muis die je hebt boven het krasveld
		    
		
			//scratchpad2
			var images = [], 
			index = 0;

			images[0] = "images/slide1.jpg";
			images[1] = "images/slide2.jpg";
			images[2] = "images/slide3.jpg";
			images[3] = "images/logo.jpg";
			images[4] = "images/winner.png";
			images[5] = "images/scratch-to-win.png";

			index = Math.floor(Math.random() * images.length);

			$('#nummer2').wScratchPad({
			  scratchMove: function (e, percent) {
				console.log(percent);
				if (percent > 70)
				{
					this.clear();
					cleared = cleared + 1;
				}
			  }
			});
			$("#nummer2").wScratchPad('bg', images[index]);
			$("#nummer2").wScratchPad('fg', 'images/overlay.png');
			$("#nummer2").wScratchPad('size', '15');
			$("#nummer2").wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');
			
			//scratchpad3
			var images = [], 
			index = 0;

			images[0] = "images/slide1.jpg";
			images[1] = "images/slide2.jpg";
			images[2] = "images/slide3.jpg";
			images[3] = "images/logo.jpg";
			images[4] = "images/winner.png";
			images[5] = "images/scratch-to-win.png";

			index = Math.floor(Math.random() * images.length);

			$('#nummer3').wScratchPad({
			  scratchMove: function (e, percent) {
				console.log(percent);
				if (percent > 70)
				{
					this.clear();
					cleared = cleared + 1;
				}
			  }
			});
			$("#nummer3").wScratchPad('bg', images[index]);
			$("#nummer3").wScratchPad('fg', 'images/overlay.png');
			$("#nummer3").wScratchPad('size', '15');
			$("#nummer3").wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');
			
			//scratchpad4
			var images = [], 
			index = 0;

			images[0] = "images/slide1.jpg";
			images[1] = "images/slide2.jpg";
			images[2] = "images/slide3.jpg";
			images[3] = "images/logo.jpg";
			images[4] = "images/winner.png";
			images[5] = "images/scratch-to-win.png";

			index = Math.floor(Math.random() * images.length);

			$('#nummer4').wScratchPad({
			  scratchMove: function (e, percent) {
				console.log(percent);
				if (percent > 70)
				{
					this.clear();
					cleared = cleared + 1;
				}
			  }
			});
			$("#nummer4").wScratchPad('bg', images[index]);
			$("#nummer4").wScratchPad('fg', 'images/overlay.png');
			$("#nummer4").wScratchPad('size', '15');
			$("#nummer4").wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');
			
			//scratchpad5
			var images = [], 
			index = 0;

			images[0] = "images/slide1.jpg";
			images[1] = "images/slide2.jpg";
			images[2] = "images/slide3.jpg";
			images[3] = "images/logo.jpg";
			images[4] = "images/winner.png";
			images[5] = "images/scratch-to-win.png";

			index = Math.floor(Math.random() * images.length);

			$('#nummer5').wScratchPad({
			  scratchMove: function (e, percent) {
				console.log(percent);
				if (percent > 70)
				{
					this.clear();
					cleared = cleared + 1;
				}
			  }
			});
			$("#nummer5").wScratchPad('bg', images[index]);
			$("#nummer5").wScratchPad('fg', 'images/overlay.png');
			$("#nummer5").wScratchPad('size', '15');
			$("#nummer5").wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');
			
			//scratchpad6
			var images = [], 
			index = 0;

			images[0] = "images/slide1.jpg";
			images[1] = "images/slide2.jpg";
			images[2] = "images/slide3.jpg";
			images[3] = "images/logo.jpg";
			images[4] = "images/winner.png";
			images[5] = "images/scratch-to-win.png";

			index = Math.floor(Math.random() * images.length);

			$('#nummer6').wScratchPad({
			  scratchMove: function (e, percent) {
				console.log(percent);
				if (percent > 70)
				{
					this.clear();
					cleared = cleared + 1;
				}
			  }
			});
			$("#nummer6").wScratchPad('bg', images[index]);
			$("#nummer6").wScratchPad('fg', 'images/overlay.png');
			$("#nummer6").wScratchPad('size', '15');
			$("#nummer6").wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');
			
			//scratchpad7
			var images = [], 
			index = 0;

			images[0] = "images/slide1.jpg";
			images[1] = "images/slide2.jpg";
			images[2] = "images/slide3.jpg";
			images[3] = "images/logo.jpg";
			images[4] = "images/winner.png";
			images[5] = "images/scratch-to-win.png";

			index = Math.floor(Math.random() * images.length);

			$('#nummer7').wScratchPad({
			  scratchMove: function (e, percent) {
				console.log(percent);
				if (percent > 70)
				{
					this.clear();
					cleared = cleared + 1;
				}
			  }
			});
			$("#nummer7").wScratchPad('bg', images[index]);
			$("#nummer7").wScratchPad('fg', 'images/overlay.png');
			$("#nummer7").wScratchPad('size', '15');
			$("#nummer7").wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');
			
			//scratchpad8
			var images = [], 
			index = 0;

			images[0] = "images/slide1.jpg";
			images[1] = "images/slide2.jpg";
			images[2] = "images/slide3.jpg";
			images[3] = "images/logo.jpg";
			images[4] = "images/winner.png";
			images[5] = "images/scratch-to-win.png";

			index = Math.floor(Math.random() * images.length);

			$('#nummer8').wScratchPad({
			  scratchMove: function (e, percent) {
				console.log(percent);
				if (percent > 70)
				{
					this.clear();
					cleared = cleared + 1;
				}
			  }
			});
			$("#nummer8").wScratchPad('bg', images[index]);
			$("#nummer8").wScratchPad('fg', 'images/overlay.png');
			$("#nummer8").wScratchPad('size', '15');
			$("#nummer8").wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');
			
			//scratchpad9
			var images = [], 
			index = 0;

			images[0] = "images/slide1.jpg";
			images[1] = "images/slide2.jpg";
			images[2] = "images/slide3.jpg";
			images[3] = "images/logo.jpg";
			images[4] = "images/winner.png";
			images[5] = "images/scratch-to-win.png";

			index = Math.floor(Math.random() * images.length);

			$('#nummer9').wScratchPad({
			  scratchMove: function (e, percent) {
				console.log(percent);
				if (percent > 70)
				{
					this.clear();
					cleared = cleared + 1;
				}
			  }
			});
			$("#nummer9").wScratchPad('bg', images[index]);
			$("#nummer9").wScratchPad('fg', 'images/overlay.png');
			$("#nummer9").wScratchPad('size', '15');
			$("#nummer9").wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');
			
			
			if (cleared === 9)
			{
				window.alert('alle vakjes zijn open gekrast');
				window.location.href="geenprijs.php";
			}
			
		
	</script>
	<script type="text/javascript">
		$("#nummer2").wScratchPad({});		
		$("#nummer3").wScratchPad({});
		
		$("#nummer4").wScratchPad({});		
		$("#nummer5").wScratchPad({});
		$("#nummer6").wScratchPad({});

		$("#nummer7").wScratchPad({});		
		$("#nummer8").wScratchPad({});
		$("#nummer9").wScratchPad({});			
	</script>
</body>
</html>


ik heb 9 kras vakjes en elke keer als ik er een heb open gekrast moet er 1 bij mijn var boven in worden geteld.
uiteindelijk als ik ze heb open gekrast zou er een alert moeten komen volgens mijn if statement onder in de code.
er komt geen alert maar bij elk vakje wat voor 70 % word open gekrast word wel meteen leeg gemaakt.

als iemand mij zou kunnen helpen zou ik het heel erg op prijs stellen.

mvg,

Bram poulisse
Frank Nietbelangrijk
16-09-2014 15:37
9 kras vakjes en 9 keer herhaling van code :-)

Heb je nog even wat bijbehorende HTML of nog liever een live voorbeeldje?

Code kan veel korter.
J Jacco Engel
16-09-2014 15:38
line 249, mijn ervaring is dat var++ niet altijd jofel werkt. Vervang het eens door cleared = cleared + 1;

Ook de spatie tussen cleared en ++ verwijderen zou het kunnen oplossen.
Bram Poulisse
16-09-2014 15:45
Jacco Engel op 16/09/2014 15:38:03

line 249, mijn ervaring is dat var++ niet altijd jofel werkt. Vervang het eens door cleared = cleared + 1;

Ook de spatie tussen cleared en ++ verwijderen zou het kunnen oplossen.


alle bij geprobeerd en het werkte geen van beide :(

[size=xsmall]Toevoeging op 16/09/2014 15:50:17:[/size]

Frank Nietbelangrijk op 16/09/2014 15:37:38

9 kras vakjes en 9 keer herhaling van code :-)

Heb je nog even wat bijbehorende HTML of nog liever een live voorbeeldje?

Code kan veel korter.


ik heb de hele code er op gezet, een live voorbeeld geven lukt helaas niet.
J Jacco Engel
16-09-2014 16:21 gewijzigd op 16-09-2014 16:23 

 <script type="text/javascript">
        $("#nummer2").wScratchPad({});        
        $("#nummer3").wScratchPad({});
        
        $("#nummer4").wScratchPad({});        
        $("#nummer5").wScratchPad({});
        $("#nummer6").wScratchPad({});

        $("#nummer7").wScratchPad({});        
        $("#nummer8").wScratchPad({});
        $("#nummer9").wScratchPad({});            
    </script>


Waarom staat nummer 1 hier niet bij?

En iets kortere code :

    
<html>
<head>
    <script language="JavaScript1.2" type="text/javascript">

        function disableselect(e)
        {
            return false         /*disabeling selection action*/
        }
        function reEnable()
        {
            return true
        }
        document.onselectstart=new Function ("return false")
        if (window.sidebar)
        {

            document.onclick=reEnable
        }    
        function clickIE()
        {
            if (document.all)
            {
                (message);
                return false;
            }
        }
        document.oncontextmenu=new Function("return false")        
    </script>
    <meta CHARSET="UTF-8">
    
    <title>Scratch Scratch</title>

    <!-- jQuery -->
    <script type="text/javascript" src="./inc/jquery.1.7.1.min.js"></script>

    <!-- wScratchPad -->
    <script type="text/javascript" src="./wScratchPad.js"></script>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="positie">
        <div id="nummer1">
        </div>
        <div id="nummer2">
        </div>
        <div id="nummer3">
        </div>
        <div id="nummer4">
        </div>
        <div id="nummer5">
        </div>
        <div id="nummer6">
        </div>
        <div id="nummer7">
        </div>
        <div id="nummer8">
        </div>
        <div id="nummer9">
        </div>
    </div>
    <div id="logo">
            <img src="images/logo.jpg" style="WIDTH:350; HEIGHT:200px; border: solid 3px;"/> <!--moet nog een echt logo in-->
    </div>
    <script type="text/javascript">

            var cleared = 0;
			
			//aantal scratchpads
			var squares = 9 ;
			
            var images = [], 
            index = 0;
			
			var counter = 1;
			
			while(counter <= squares)
			{
				images[0] = "images/slide1.jpg";
				images[1] = "images/slide2.jpg";
				images[2] = "images/slide3.jpg";
				images[3] = "images/logo.jpg";
				images[4] = "images/winner.png";
				images[5] = "images/scratch-to-win.png";

				index = Math.floor(Math.random() * images.length);

				$('#nummer' + counter).wScratchPad({
				  scratchMove: function (e, percent) {
					console.log(percent);
					if (percent > 70)
					{
						this.clear();
						cleared = cleared + 1;
					}
				  }
				});
				$("#nummer" + counter).wScratchPad('bg', images[index]);
				$("#nummer" + counter).wScratchPad('fg', 'images/overlay.png');
				$("#nummer" + counter).wScratchPad('size', '15');
				$("#nummer" + counter).wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');
				counter = counter + 1;
            }
            
            if (cleared === 9)
            {
                window.alert('alle vakjes zijn open gekrast');
                window.location.href="geenprijs.php";
            }
            
        
    </script>
    <script type="text/javascript">
		var squares = 9 ;
		var counter = 1;
			
		while(counter <= squares)
		{
			$("#nummer" + counter).wScratchPad({});          
			counter = counter + 1;
		}
    </script>
</body>
</html>
Bram Poulisse
17-09-2014 09:12
De verkorte code is wel slim gemaakt gaat zeker van pas komen.
J Jacco Engel
17-09-2014 10:31
En zoals ik al aangaf :

    <script type="text/javascript">
        $("#nummer2").wScratchPad({});        
        $("#nummer3").wScratchPad({});
        
        $("#nummer4").wScratchPad({});        
        $("#nummer5").wScratchPad({});
        $("#nummer6").wScratchPad({});

        $("#nummer7").wScratchPad({});        
        $("#nummer8").wScratchPad({});
        $("#nummer9").wScratchPad({});            
    </script>


Je mist hier nummer 1. Ik heb dan ook het vermoeden dat je cleared counter maar tot 8 komt maar nooit bij negen tot je nummer1 ook toevoegd
Bram Poulisse
17-09-2014 11:19
als ik in de console kijk geeft mijn clear counter wel tot en met 9 aan. maar het lijkt alsof hij mijn if niet pakt.
J Jacco Engel
17-09-2014 11:29
zet eens vlak voor je if :

console.log(typeof cleared)


of vervang in je if === eens door ==

if (cleared == 9)
{
   window.alert('alle vakjes zijn open gekrast');
   window.location.href="geenprijs.php";
}
Bram Poulisse
17-09-2014 11:33
als ik
console.log(typeof cleared)
            if (cleared == 9)
            {
                window.alert('alle vakjes zijn open gekrast');
                window.location.href="geenprijs.php";
            }

gebruik komt er in de console te staan: number

ik heb al geprobeerd met == en met = en met != en ook bijv. 
  if (cleared >= 8)
            {
                window.alert('alle vakjes zijn open gekrast');
                window.location.href="geenprijs.php";
            }
J Jacco Engel
17-09-2014 11:35 gewijzigd op 17-09-2014 11:39 

    
<html>
<head>
    <script language="JavaScript1.2" type="text/javascript">

        function disableselect(e)
        {
            return false         /*disabeling selection action*/
        }
        function reEnable()
        {
            return true
        }
        document.onselectstart=new Function ("return false")
        if (window.sidebar)
        {

            document.onclick=reEnable
        }    
        function clickIE()
        {
            if (document.all)
            {
                (message);
                return false;
            }
        }
        document.oncontextmenu=new Function("return false")        
    </script>
    <meta CHARSET="UTF-8">
    
    <title>Scratch Scratch</title>

    <!-- jQuery -->
    <script type="text/javascript" src="./inc/jquery.1.7.1.min.js"></script>

    <!-- wScratchPad -->
    <script type="text/javascript" src="./wScratchPad.js"></script>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
    <div id="positie">
        <div id="nummer1">
        </div>
        <div id="nummer2">
        </div>
        <div id="nummer3">
        </div>
        <div id="nummer4">
        </div>
        <div id="nummer5">
        </div>
        <div id="nummer6">
        </div>
        <div id="nummer7">
        </div>
        <div id="nummer8">
        </div>
        <div id="nummer9">
        </div>
    </div>
    <div id="logo">
            <img src="images/logo.jpg" style="WIDTH:350; HEIGHT:200px; border: solid 3px;"/> <!--moet nog een echt logo in-->
    </div>
    <script type="text/javascript">

            var cleared = 0;
            
            //aantal scratchpads
            var squares = 9 ;
            
            var images = [], 
            index = 0;
            
            var counter = 1;
            
            while(counter <= squares)
            {
                images[0] = "images/slide1.jpg";
                images[1] = "images/slide2.jpg";
                images[2] = "images/slide3.jpg";
                images[3] = "images/logo.jpg";
                images[4] = "images/winner.png";
                images[5] = "images/scratch-to-win.png";

                index = Math.floor(Math.random() * images.length);

                $('#nummer' + counter).wScratchPad({
                  scratchMove: function (e, percent) {
                    console.log(percent);
                    if (percent > 70)
                    {
                        this.clear();
                        cleared = cleared + 1;
						if (cleared === 9)
						{
							window.alert('alle vakjes zijn open gekrast');
							window.location.href="geenprijs.php";
						}
                    }
                  }
                });
                $("#nummer" + counter).wScratchPad('bg', images[index]);
                $("#nummer" + counter).wScratchPad('fg', 'images/overlay.png');
                $("#nummer" + counter).wScratchPad('size', '15');
                $("#nummer" + counter).wScratchPad('cursor', 'url("./images/coin.png") 5 5, default');
                counter = counter + 1;
            }
           
    </script>
    <script type="text/javascript">
        var squares = 9 ;
        var counter = 1;
            
        while(counter <= squares)
        {
            $("#nummer" + counter).wScratchPad({});          
            counter = counter + 1;
        }
    </script>
</body>
</html>


Je wil je if doen als je je clear verhoogd. Je if word direct geparsed als je pagina laad, en dan zal de cleared altijd nul zijn. Je if word in de huidige situatie maar 1 keer gedraaid.

Heb de code voor je aangepast en het zou moeten werken :)

Reageren

Inloggen om te reageren