Javascript-форум - Почему не работает смена стиля div-a?

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Почему не работает смена стиля div-a? (https://javascript.ru/forum/dom-window/16622-pochemu-ne-rabotaet-smena-stilya-div.html)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> <head>

<style type='text/css'>
.style1  {width: 300; height: 100; background: #f00000; text-align:center;}
.style2  {width: 400; height: 200; background: #00f000; text-align:left;}
</style>

<script type="text/javascript">
function change(c) { 
   c.className = (c.className == 'style1') ? 'style2' : 'style1';
};   
</script>

</head> 
<div id='id1' class='style1'>бла-бла-бла</div>
<input type=button  value='Поменять стиль' onclick="change(document.getElementById('id1'))">
<div id='id2' class='style1'>бла-бла-бла</div>
<input type=button  value='Поменять стиль' onclick="change(document.getElementById('id2'))">
<body> 
</body> 
</html>

Ситуация немного иная
При нажатии кнопки нужно изменять стили всех блоков div на странице

Цитата:

Сообщение от tom_ozi

При нажатии кнопки нужно изменять стили всех блоков div на странице

Беги в цикле и меняй. В чем проблема?

Впервые столкнулся с javascript.
Что нужно изменить?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> <head>

<style type='text/css'>
.style1  {width: 300; height: 100; background: #f00000; text-align:center;}
.style2  {width: 400; height: 200; background: #00f000; text-align:left;}
</style>
</head> 
<body> 

<div class='group style1'>бла-бла-бла</div>
<div class='group style1'>бла-бла-бла</div>
<input type=button  value='Поменять стиль'>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
	var group = $('.group');
	$(':button').click(function()
		{
		$(group).toggleClass('style1');
		$(group).toggleClass('style2');
		});  
	</script>
</body> 
</html>

Большое спасибо!
Срочно приступаю к изучению javascript

А что подгружается по этому адресу http://code.jquery.com/jquery-1.10.2.min.js ?

а открыть посмотреть?? jquery.com
jquery библиотека

Как можно перенести кнопку над блоками div?

Добрый день
Как можно перенести кнопку над блоками div?
При переносе - функция не выполняется.
Нижняя кнопка работает, а верхняя не работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> <head>

<style type='text/css'>
.style1  {width: 300; height: 100; background: #f00000; text-align:center;}
.style2  {width: 400; height: 200; background: #00f000; text-align:left;}
</style>
</head> 
<body> <input type=button  value='Поменять стиль'>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
	var group = $('.group');
	$(':button').click(function()
		{
		$(group).toggleClass('style1');
		$(group).toggleClass('style2');
		});  
	</script>
<div class='group style1'>бла-бла-бла</div>
<div class='group style1'>бла-бла-бла</div>
<input type=button  value='Поменять стиль'>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
	<script type="text/javascript">
	var group = $('.group');
	$(':button').click(function()
		{
		$(group).toggleClass('style1');
		$(group).toggleClass('style2');
		});  
	</script></body> 
</html>

Спасибо

Сам разобрался. Спасибо всем за помощь!
Не знаю как поставить кнопочку "посмотреть код" в сообщение.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html> <head>

<style type='text/css'>
.style1  {width: 300; height: 100; background: #f00000; text-align:center;}
.style2  {width: 400; height: 200; background: #00f000; text-align:left;}
.style3  {width: 400; height: 200; background: #049100; text-align:right;}
.style4  {width: 400; height: 200; background: #00fff0; text-align:right;}
</style>
</head> 
<body> 



 <input type="button" value="open" onclick="dawn(this)"> <script type=
    "text/javascript">
   
    </script>




<div class='group style1'>бла-бла-бла</div><br />
<div class='group style1'>бла-бла-бла</div><br />
<div class='grou style3'>бла-бла-бла</div><br />
<div class='grou style3'>бла-бла-бла</div><br />


	<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

 <!-- Идентификатор для первого стиля -->
	<script type="text/javascript">
	var group = $('.group');
	$(':button').click(function()
		{
		$(group).toggleClass('style1');
		$(group).toggleClass('style2');
		});  
		
		 <!-- Идентификатор для второго стиля -->
		
	
    var grou = $('.grou');
	$(':button').click(function()
		{
		$(grou).toggleClass('style3');
		$(grou).toggleClass('style4');
		});   
		
		
		 <!-- Смена названия кнопки -->
		
		function dawn(input)
    {
    input.value =   input.value != 'close' ?  'close' : 'open' 
    }
</script>

	  

    
    
</body> 
</html>

>>>Не знаю как поставить кнопочку "посмотреть код" в сообщение.
когда вставляете [html] тэги, то в в начале нужно дописать [html run]

и 2 раза jquery подключать не нужно.. достаточно одного, в конце