zmiana właściwości css po kliknięciu- nie działa

pytanie zadane 24 sierpnia 2017 w JavaScript przez Kamil Stoksik Początkujący (490 p.)

jak w temacie widzę jedynie jak czerwony kwadrat miga przeniesiony o margines. Gdzie jest błąd że nie zyskuje on koloru i marginesu "na stałe" tylko tak jakby błyska na moment i wraca do pierwotnej postaci?

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	.kwadrat
	{
		width: 200px;
		height: 200px;
	}
</style>
<body>
<div id="but1"> <a href="" onclick="oznacz('zielony')">przycisk</a></div>
<div id="but2"> <a href="" onclick="oznacz('czerwony')">przycisk2</a></div>
<div id="zielony" class="kwadrat"></div>
<div id="czerwony" class="kwadrat"></div>
<script type="text/javascript" language="javascript">
function oznacz(element){
   var pole = document.getElementById(element);
   pole.style.backgroundColor = "darkred";
   pole.style.marginTop = "200px";
}
 </script>
</body>
</html>

3 odpowiedzi

odpowiedź 24 sierpnia 2017 przez niezalogowany
wybrane 24 sierpnia 2017 przez Kamil Stoksik

Najlepsza

daj # do href linków. W taki sposób:

<div id="but1"> <a href="#" onclick="oznacz('zielony')">przycisk</a></div>
<div id="but2"> <a href="#" onclick="oznacz('czerwony')">przycisk2</a></div>

komentarz 24 sierpnia 2017 przez Kamil Stoksik Początkujący (490 p.)

wszystko hula dziękuję.

odpowiedź 24 sierpnia 2017 przez cyklop123 Bywalec (2,790 p.)

odpowiedź 24 sierpnia 2017 przez Kamil Stoksik Początkujący (490 p.)

nowy problem z getelementsbyclassname. znowu nie hula a powinno


<body>
<div id="but1"> <a href="#" onfocus="oznacz('zielony')">przycisk</a></div>
<div id="but2"> <a href="#" onfocus="oznacz('czerwony')">przycisk2</a></div>
<div id="zielony" class="kwadrat">a</div>
<div id="czerwony" class="kwadrat">a</div>
<script type="text/javascript" language="javascript">
function oznacz(element){
   var pole = document.getElementById(element);
   pole.style.backgroundColor = "darkred";
   pole.style.marginTop = "200px";
   if (element=='zielony') 
   {
   		var boxes = document.getElementsByClassName('kwadrat'),

   		for (var i = boxes.length; i >= 0; i--) {
   			boxes[i].style.backgroundColor = "darkgreen";
   		}
   }
}