Passing around event object without jquery

Question

Apologies for the basic question. It's hard to find information about JS event handling without finding an explanation that includes jQuery, and I'm trying to manipulate the DOM with pure Javascript. It's been helping me better understand how the browser works.

I'm trying to call a function to add an additional class to elements with the same class.

Can someone explain the correct syntax here?

Is it necessary to reference the ID?

I've tried a number of approaches. Thanks so much.

function animateSquare(e) {
  var id = e.target.id
  var el = document.getElementById(id);
  el.className = el.className + "newClass";
};



window.onload = function() {
  var anim = document.getElementsByClassName("squareThing");
  for (var i = 0; i < anim.length; i++) {
    anim[i].click(function(e) {
      animateSquare(e);
    });
  }
}

<div class="squarething" id="one"></div>
<div class="squarething" id="two"></div>

getElementsByClassName('squareThing') does not match your class="squarething" — asafreedman
– asafreedman, Commented Jul 14, 2015 at 19:54
Have you looked at the mozilla documentation, which is really just general web documentation, developer.mozilla.org/en-US/docs/Web/API/Event? — Brant Olsen
– Brant Olsen, Commented Jul 14, 2015 at 19:55

Barmar · Accepted Answer · 2015-07-14 20:00:12Z

The standard Javascript method to add event bindings, analogous to .on() in jQuery, is addEventListener.

And when you add a class to el.className, you need to include a space before it, to separate it from the existing classes.

You don't need to use getElementById(id), since e.target is the element itself -- you're getting the element, getting its ID, and then looking up the element again by ID, which is redundant.

function animateSquare(e) {
  var el = e.target;
  el.className = el.className + " newClass";
};

window.onload = function() {
  var anim = document.getElementsByClassName("squarething");
  for (var i = 0; i < anim.length; i++) {
    anim[i].addEventListener('click', function(e) {
      animateSquare(e);
    });
  }
}

.squarething {
  width: 50px;
  height: 50px;
  background-color: green;
  margin: 2px;
}
.newClass {
  background-color: red;
}

<div class="squarething" id="one"></div>
<div class="squarething" id="two"></div>

blex · Accepted Answer · 2015-07-14 19:57:31Z

1

This should be enough. Try it:

function animateSquare() {
  this.className += " newClass";
}

window.onload = function() {
  var anim = document.getElementsByClassName("squarething");
  for (var i = 0; i < anim.length; i++) {
    anim[i].onclick = animateSquare;
  }
}

.squarething {
  padding: 1em;
  margin: .5em;
  float: left;
  background: blue;
}
.squarething.newClass {
  background: orange;
}

<div class="squarething" id="one"></div>
<div class="squarething" id="two"></div>

answered Jul 14, 2015 at 19:57

blex

25.7k6 gold badges48 silver badges78 bronze badges

Comments

tymeJV · Accepted Answer · 2015-07-14 19:57:54Z

1

.click(handler) is a jQuery method - you want the .onclick or addEventListener methods:

window.onload = function() {
    var anim = document.getElementsByClassName("squarething");
    for (var i = 0; i < anim.length; i++) {
        anim[i].onclick = animateSquare;
    }
}

You can also use this inside your handler function:

function animateSquare(e) {
    this.className = el.className + "newClass";
};

answered Jul 14, 2015 at 19:57

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Collectives™ on Stack Overflow

Passing around event object without jquery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related