randomowe divy, onclick, javascript

pytanie zadane 11 listopada 2016 w JavaScript przez anhydryt Początkujący (290 p.)

Witam,

Próbuje zrobić taką prostę (w grywalności, bo przy programowaniu już mnie krew zalewa) grę. Mamy 9 kółek, gdy klikniemy na kółko z grubszym borderem to zlicza punkt a nastepnie randomowo podswietla sie grubszym borderem inne kolko. O ile zlicza mi punkty, podswietla sie inne, to gdy klikne na zwykle kólko tj. z chudszym borderem to tez zlicza punkt i dalej dziala skrypt randomowego podswietlania.

Nie mam pojecia jak ustawic, zeby niepodswietlony div (kolko) byl nieaktywny (lub niezliczany), pozniej planuje dodac interval 60 s na granie i zliczenie max ilosci punktów.

Prosze o jakies wskazowki, dziekuje z gory za poswiecona chwile. A i zdjecie:

<body>
		<div class="container-fluid">
			<div class="row">
			  <div class="col-md-2">
				<h1> Wyniki </h1> 
				<p> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. </p>
			  </div>
			  
			  <div class="col-md-8">
				<h1> Gra </h1>
				
				<div class="wynik">
					<h2> Rezultat </h2>
					<p id="zliczenie"> </p>
				</div>
				
				<div class="points"> </div>
				
			  </div>
			  
			  <div class="col-md-2">
				<h1> Profil </h1> 
				<p> Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. </p>
			  </div>
			</div>
		</div>
	</body>

body {
	background-color: #ecf0f1;
	margin			: 2% 2%;
}

.wynik{
	border			: solid 1px blue;
}

.point {
	width			: 100px;
	height			: 100px;
	border			: solid 1px #000;
	border-radius	: 100%;
	text-align		: center;
	cursor			: pointer;
	float			: left;
	margin			: 20px;
}
.point:hover {
	color			: red;
	border-radius	: 0%;
}

.points{
	width			: calc(140px * 3);
	margin			: 5px auto;
}

window.onload = start;
function start()
{
		var div_value = "";
		
		for (i = 0; i < 9; i++) 
			{
				var element = "div_number" + i;
				div_value = div_value + '<div class="point" id="'+element+'" onclick="c('+i+')"> Klik </div>';
				
				if((i+1)%3 == 0) 
				{
					div_value = div_value + '<div style="clear:both;"> </div>';
				} 

			}
		
		document.getElementsByClassName("points")[0].innerHTML = div_value; 
			
esthetic();
random_show();
}
// WYSWIETLA 1 LOSOWY DIV ABY ZACZAC GRAC (punkt zapalny)
function random_show() {
	var a = Math.floor((Math.random() * 8));
	var x = document.getElementById("div_number" + a).style.border="10px dotted";
}

var liczby = [];
// LOSUJE KOLEJNY, ZLICZA KLIKNIETY
function c(i) 
{
	var a = Math.floor((Math.random() * 8));
	this.i = a;
	var z = document.getElementById("div_number" + i);
	var y = document.getElementById("div_number" + a);
	
	
	if(y.style.border = "10px dotted") {
		z.style.border ="5px dotted";
		liczby.push(i);	
	} else {
		y.style.border="8px solid";
	} 
	
	var x = document.getElementById("zliczenie").innerHTML = liczby.length;
	
}
	
	
// NADAJE WSZYSTKIM DIVOM POCZATKOWY style.border 
function esthetic()
{
	var x = document.getElementsByClassName("point");
	for (i = 0; i < 9; i++) 
	{
		x[i].style.border = "5px dotted";
				
	}
}

1 odpowiedź

odpowiedź 11 listopada 2016 przez Comandeer Guru (600,810 p.)

if(y.style.border = "10px dotted")

Chcesz raczej porównać a nie przypisać.

komentarz 11 listopada 2016 przez anhydryt Początkujący (290 p.)

nawet jak wpisze dwa znaki równości, to i tak nic to nie da, swoją drogą czy ten kod w ogóle zmierza w dobrą stronę? może jakaś inna ścieżka, technologia? jQuery?