I am trying to convert this jQuery Code into Vanilla JavaScript code. I'm having trouble with some of the methods. I think I have some of them, but some of them not.

Jquery:

jQuery('.image').click(function() {
  jQuery(this).toggleClass('normal-zoom zoom-in');
});

jQuery('.image').on('mousemove', function(event) {

  var bbox = event.target.getBoundingClientRect();
  var mouseX = event.clientX - bbox.left;
  var mouseY = event.clientY - bbox.top;
  var xPercent = (mouseX / bbox.width) * 100;
  var yPercent = (mouseY / bbox.height) * 100;

  jQuery(this).css('transform-origin', (xPercent '% '   yPercent  '%') );

});

jQuery('.image').on('mouseenter', function() {
  jQuery(this).addClass('zoom-in');
  jQuery(this).removeClass('normal-zoom');
});

jQuery('.image').on('mouseleave', function() {
  jQuery(this).addClass('normal-zoom');
  jQuery(this).removeClass('zoom-in');
});

I tried.

Javascript:

document.querySelector('.image').onclick = function() {
  document.querySelector(this).classList.toggle('normal-zoom zoom-in');
};

document.querySelector('.image').addEventListener('mousemove', function(event) {

  var bbox = event.target.getBoundingClientRect();
  var mouseX = event.clientX - bbox.left;
  var mouseY = event.clientY - bbox.top;
  var xPercent = (mouseX / bbox.width) * 100;
  var yPercent = (mouseY / bbox.height) * 100;

  document.querySelector(this).css('transform-origin', (xPercent '% '   yPercent  '%') );

});

document.querySelector('.image').addEventListener('mouseenter', function() {
  document.querySelector(this).classList.add('zoom-in');
  document.querySelector(this).classList.remove('normal-zoom');
});

document.querySelector('.image').addEventListener('mouseleave', function() {
  document.querySelector(this).classList.add('normal-zoom');
  document.querySelector(this).classList.remove('zoom-in');
});

Where is the error?

CodePudding user response：

I have added two comments to the code to show two lines I fixed and why they needed fixing.

Additionally, I replaced every instance of document.querySelector(this) with document.querySelector('.image'), because the callbacks inside .onclick and .addEventListener do not bind this to the selected element the same way JQuery does, so you need to re-select the element each time. In your code, this is referencing the callback function, which is not what you want.

document.querySelector('.image').onclick = function() {
  document.querySelector('.image').classList.toggle('zoom-in');// I split this line into two lines, because `.toggle()` can only accept one classname at a time.
  document.querySelector('.image').classList.toggle('normal-zoom');
};

document.querySelector('.image').addEventListener('mousemove', function(event) {
  var bbox = event.target.getBoundingClientRect();
  var mouseX = event.clientX - bbox.left;
  var mouseY = event.clientY - bbox.top;
  var xPercent = (mouseX / bbox.width) * 100;
  var yPercent = (mouseY / bbox.height) * 100;

  document.querySelector('.image').style.transformOrigin = xPercent '% '   yPercent '%';// There is no such `.css()` method on DOM nodes. Instead, set an element's css by using the `style` property.
});

document.querySelector('.image').addEventListener('mouseenter', function() {
  document.querySelector('.image').classList.add('zoom-in');
  document.querySelector('.image').classList.remove('normal-zoom');
});

document.querySelector('.image').addEventListener('mouseleave', function() {
  document.querySelector('.image').classList.add('normal-zoom');
  document.querySelector('.image').classList.remove('zoom-in');
});

I would recommend using this code instead though, as it's cleaner, easier to read, implements DRY practices, and works to prevent bugs related to changes in the DOM.

const imageElement = document.querySelector('.image');

imageElement.addEventListener('click', function() {
  imageElement.classList.toggle('zoom-in');
  imageElement.classList.toggle('normal-zoom');
};

imageElement.addEventListener('mousemove', function(event) {
  const bbox = imageElement.getBoundingClientRect();
  const mouseX = event.clientX - bbox.left;
  const mouseY = event.clientY - bbox.top;
  const xPercent = (mouseX / bbox.width) * 100;
  const yPercent = (mouseY / bbox.height) * 100;

  imageElement.style.transformOrigin = xPercent '% '   yPercent '%';
});

imageElement.addEventListener('mouseenter', function() {
  imageElement.classList.add('zoom-in');
  imageElement.classList.remove('normal-zoom');
});

imageElement.addEventListener('mouseleave', function() {
  imageElement.classList.add('normal-zoom');
  imageElement.classList.remove('zoom-in');
});