Javascript-форум - div, изменение цвета при клике на div элемент

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

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

- - div, изменение цвета при клике на div элемент (https://javascript.ru/forum/dom-window/24138-div-izmenenie-cveta-pri-klike-na-div-ehlement.html)

div, изменение цвета при клике на div элемент

Помогите, нужен код html страницы в которой с помощью JavaScript изменяется цвет div блока и отображается сколько на данный момент измененных div блоков.
то есть можно опять нажать на ранее измененный div блок и к нему вернется прежний цвет и счетчик отминусуется на один...

помогите пожалуйста... нужно в универ, проходили небольшую практику. мы яваскрипт еще не учили но мне дали такое задание потому что знаю другие языки средненько(c++,c#), а время для самостоятельного решения не хватает...

ну вот я нарисовал прототип html страницы для лучшего восприятия, что там должно происходить.

где n это количество измененных div блоков.

<style>
* {margin:0;padding:0}
.green {background-color:#77FC79}
.red {background-color:#FA4B57}
div.block {
    margin: 30px;
    border:1px #2E2E2E solid;
    text-align:center;
    padding:10px 0px;
    width:100px;
}
.left {
    position:absolute;
    left: 150px;
}
</style>

<div class="left">
    Clicked : <b id="res">0</b>
</div>


<div class="block red">hello</div>
<div class="block red">hello</div>
<div class="block red">hello</div>

<script>
window.onload = function(){
	var a = document.getElementById("res");
    document.body.onclick = function(e){
        var el = e ? e.target:event.srcElement;
		var cls = el.className;
		if(!~cls.indexOf("block")) return;
        if(~cls.indexOf("green")) {
        	el.className = "block red";
        	a.innerHTML--;
        } else {
        	el.className = "block green";
        	a.innerHTML++;
        }		
    }
}
</script>

Деньги на бочку!

<style>
#main div {padding:15px;margin:5px; border:1px solid #000;background:#f00}
#main .selected{background:#afa}
</style>

<div id="main">
  <div>Текст</div>
  <div>Текст</div>
  <div>Текст</div>
  Выделено объектов:
</div>

<script>
(function(){
  var m=document.getElementById('main'),
      i=0,
      n=m.appendChild(document.createTextNode('n'));
  m.onclick=function(e){
    var t=e?e.target:window.event.srcElement;
    if(t!=m) t.className=t.className?i--&&'':++i&&'selected';
    n.data=i;
  }
}())
</script>

melky, ны не сечёшь темы, на такие запросы надо придумывать как можно более заковыристый код.))

if(t!=m) t.className=t.className?i--&&'':++i&&'selected';

запятая вместо && красивее смотрится.

if(t!=m) t.className=t.className?i--,'':++i,'selected';

Цитата:

Сообщение от Aetae (Сообщение 144291)

melky, ны не сечёшь темы, на такие запросы надо придумывать как можно более заковыристый код.))

:D я написал просто и понятно. даже без функций add/remove+class

версия с использованием jquery, может быть не оптимально,
но по-моему нагляднее

<style>
#main div {padding:15px;margin:5px; border:1px solid #000;background:#f00}
#main .selected{background:#afa}
</style>
 
<div id="main">
  <div>Текст</div>
  <div>Текст</div>
  <div>Текст</div>
  Выделено объектов: <span>0</span>
</div>
 
<script src='http://code.jquery.com/jquery-git.js'></script>
<script>
$(function(){
  var el = $('#main > div'), // куда кликаем
      counter = $('#main > span'); // где отображаем число выделенных

  el.click(function (e) {
      $(this).toggleClass('selected'); // меняем класс
      var num = el.filter('.selected').length; // смотрим сколько выделено
      counter.text(num); // меняем текст
  });
});
</script>

АААААА ребята большое спасибо:thanks: