Question

i’ve some div’s with the same class. When I click one of those div’s, I want change the display from other div’s to ‘block’. I’m currently using inline javascript, but I want to do it without inline javascript. What I have now:

<div class="test_a" id="example_a" onclick="testfunction(this)"></div>
<div class="test_a" id="example_b" onclick="testfunction(this)"></div>
<div class="test_a" id="example_c" onclick="testfunction(this)"></div>
<div class="test_a" id="example_d" onclick="testfunction(this)"></div>
<div class="test_a" id="example_e" onclick="testfunction(this)"></div>

<div class="test_b" id="example_a_test"></div>
<div class="test_b" id="example_b_test"></div>
<div class="test_b" id="example_c_test"></div>
<div class="test_b" id="example_d_test"></div>
<div class="test_b" id="example_e_test"></div>

my function in javascript:

function testfunction(x){
var example = document.getElementById(x.id + "_test");
example.style.display = 'block';
}

So when you click on the div with id example_a, I want to change the display from example_a_test.

working example: http://pastehtml.com/view/c63rmz6tw.html

Now, how to do this with eventhandlers?

Answer 1

Here’s a click event handler that you can use:

window.addEventListener('load', init, false);

var init = (function() {
  var divs = document.getElementsByTagName('div'),
      i = 0;
  for (i = divs.length; i--;) {
    listener(i);
  }
  function listener(i) {
    divs[i].addEventListener('click', function(e) {
      var id = this.getAttribute('id'),
          idTest = id + '_test',
          testElem = document.getElementById(idTest),
          divClass = this.getAttribute('class');
      if (divClass === 'test_a') {
        testElem.style.display = 'block';
      }
      e.preventDefault();
    });
  }
});

Make sure that your test_b elements are set to display: none; in your CSS.

Here’s a jsFiddle.