Adding jQuery to js code

Question

I wanted to make this statement using jQuery but cant quite get it to work. In this statement I am clicking on an image in my html and changing it to a new image (img/HeaderImg2.jpg) Please help.

  var imageButton = document.getElementById('headerImg');
  imageButton.addEventListener('click', function(e)
  {
   console.log(e);
   imageButton.src ='img/HeaderImg2.jpg';
  } ,false);

Why do you want to switch to jQuery if it's already working with vanilla JavaScript? Don't fix it if it ain't broke. — Elliot Bonneville
– Elliot Bonneville, Commented Jan 27, 2014 at 3:07
@ElliotBonneville Perhaps he wants to know more about jQuery. — SomeKittens
– SomeKittens, Commented Jan 27, 2014 at 3:08
I understand that if the javascript works then keep it but I am trying to learn jQuery and how it functions. — lpoole
– lpoole, Commented Jan 27, 2014 at 3:33

Felix · Accepted Answer · 2014-01-27 03:07:21Z

3

Try this:

$('#headerImg').on('click',function(e) {
    console.log(e);
    $(this).attr('src','img/HeaderImg2.jpg');
});

Btw, it's better to use vanilla javascript other than using jQuery if you're able to do so.

answered Jan 27, 2014 at 3:07

Felix

38.2k8 gold badges45 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

lpoole Over a year ago

Thank you that was very helpful. If I wanted to make my header change as well when I click the same image how would I do that? right now I am using childnodes. var pageTitle = document.getElementById('header'); imageButton.addEventListener('click', function(e) { console.log(header.childNodes); header.childNodes[1].innerHTML = "Hello" } ,false);

Felix Over a year ago

You can try to use: $('#header').find(':eq(1)').html('Hello');

Andreas Josas Over a year ago

it's better to use vanilla javascript other than using jQuery if you're able to do so I'd say that depends, if I already had jQuery library included then I would use it over vanilla JS, but wouldn't include it just for the sake of it. Just be consistent across a project too.

Collectives™ on Stack Overflow

Adding jQuery to js code

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related