Change style with javascript

Question

css

Who can tell how to solve the problem

there are 5 div blocks, each with its own id and b-img style

<div id="1" class="b-img" onclick="kodimg(id)">...</div>
<div id="2" class="b-img" onclick="kodimg(id)">...</div>
<div id="3" class="b-img" onclick="kodimg(id)">...</div>
<div id="4" class="b-img" onclick="kodimg(id)">...</div>
<div id="5" class="b-img" onclick="kodimg(id)">...</div>

when you click on it, the java script changes its style to v-img

with this function

function kodimg(id)
{
 document.getElementById(id).className = 'v-img';
}

the problem is that the style of the previous clicked div remains v-img, but it needs to become b-img again

How can this be done?

Answer 1

1 option. Store the id of the previous clicked in a (global) variable.

  var old_id;
  function kodimg(id) {
    if (old_id) document.getElementById(old_id).className = 'b-img';
    document.getElementById(id).className = 'v-img';
    old_id = id;
  }

Option 2. In the kodimg function, first change the class for all divs to b-img, then put v-img for the one you need.

  function kodimg(id) {
    for (var i = 1; i <= 5; i++) document.getElementById(i).className = 'b-img';
    document.getElementById(id).className = 'v-img';
  }

And, regardless of the option chosen, to start reading books and study material on the Internet.

Answer 2

Let's start with the fact that since we are talking about switching classes, it is appropriate to write all the styles in CSS at once:

.bImg { /* сюда вписываем стиль обычного div */ }
.vImg { /* сюда вписываем стиль div, жмякнутого мышою */ }

For <div> elements , it is enough to specify classes after that ( class="..." instead of style="..." ).
Then, with the help of the jQuery library , you can make your task a lot easier.
First, you can simplify the HTML code:

1. You don't have to write onclick handlers into it, because they will be assigned later, by javascript.
2. You don't even have to put an id in it, since jQuery executes handlers in the context of elements: this points to the clicked element in the handler.

It was like this:

<div id="1" style="b-img" onclick="kodimg(id)">...</div>
<div id="2" style="b-img" onclick="kodimg(id)">...</div>
<div id="3" style="b-img" onclick="kodimg(id)">...</div>
<div id="4" style="b-img" onclick="kodimg(id)">...</div>
<div id="5" style="b-img" onclick="kodimg(id)">...</div>

It became like this:

<div class="bImg">...</div>
<div class="bImg">...</div>
<div class="bImg">...</div>
<div class="bImg">...</div>
<div class="bImg">...</div>

Secondly, the desired is achieved by simple JS code for jQuery:

$(function(){
   // после загрузки документа назначаем обработчики событий:
   $('div.bImg').click(function(){
      // в обработчике делаем две вещи:
      // 1) находим предыдущий жмякнутый div, отменяем жмякнутость
      $('div.vImg').removeClass('vImg').addClass('bImg');
      // 2) свежежмякнутому div придаём жмякнутость
      $(this).removeClass('bImg').addClass('vImg');
   });
});

Answer 3

Something like this:

for (var i = 1; i <= 5; i++) {
  if (id == i) {
    document.getElementById(i).className = 'v-img';
  } else {
    document.getElementById(i).className = 'b-img';
  }
}

Answer 4

onclick="kodimg(this)"

var lastcodedimg=0;
function kodimg(_this)
{
 if(lastcodedimg){
  lastkodimg.className='bimg'
 }
 _this.className='v-img';
 lastcodedimg=_this;
}

tested - working

Answer 5

...
...
...
...
...
function kodimg(element){
document.querySelector('.current').classList.remove('current');// current is the class for the selected element
element. classList.add('current');
}
You messed up in the task, write about styles. it's about classes. An example for firefox, by analogy, you can do it for other browsers.

Answer 6

Building on the theme of jQuery
function($){
$("div#id"). toggle(
function(){ $(this).attr("class","vimg");},
function(){ $(this). attr("class","bimg");});
})(jQuery);