CODEWITHSUNDEEP
javascripthtmldom
fstopzero
fstopzero

Reputation: 1073

Passing around event object without jquery

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>

Upvotes: 1

Views: 100

Answers (3)

Barmar
Barmar

Reputation: 782130

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>

Upvotes: 2

tymeJV
tymeJV

Reputation: 104785

.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";
};

Upvotes: 1

blex
blex

Reputation: 25659

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>

Upvotes: 1

Related Questions