CODEWITHSUNDEEP
javascriptif-statementconditional-statements
Moromain
Moromain

Reputation: 77

Margin condition in javascript

I am trying to build a slideshow that pretty much works by changing the margins in my CSS. So far it's working well but I want the next and previous button to disappear when the margins have a certain value and I couldn't find a solution.

Here is my js code:

const nextBtn = document.querySelector('#slideNext');
const prevBtn = document.querySelector('#slidePrev');
const slider = document.querySelector('.boxes-container');
const slideWidth = 250;

// Slider initial margin
slider.style.marginLeft = "0";

nextBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) - slideWidth) + 'px';
}

prevBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) + slideWidth) + 'px';
}

if (slider.style.marginLeft == "0") {
  prevBtn.style.display = "none";
} else if (slider.style.marginLeft == "-1000px") {
  nextBtn.style.display = "none";
} else {
  nextBtn.style.display = "inline-block";
  prevBtn.style.display = "inline-block";
}

My issue is on the last part: I don't know how to deal with an if/else statement that would modify the display of my buttons when the margin reach a certain value.

It would be awesome if anyone could point me in the right direction as I've spent some time trying to solve this on my own but couldn't find the right solution.

Thanks for your help!!

Upvotes: 1

Views: 561

Answers (2)

Moromain
Moromain

Reputation: 77

The reason why it wasn't working was because I wasn't checking for the margins when the buttons were clicked. I changed my code as follow:

const nextBtn = document.querySelector('#slideNext');
const prevBtn = document.querySelector('#slidePrev');
const slider = document.querySelector('.boxes-container');
const slideWidth = 250;

// Slider initial margin
slider.style.marginLeft = "0px";

function check() {
  if (slider.style.marginLeft == "0px") {
    prevBtn.style.display = "none";
  } else if (slider.style.marginLeft == "-1000px") {
    nextBtn.style.display = "none";
  } else {
    nextBtn.style.display = "inline-block";
    prevBtn.style.display = "inline-block";
  }
}

window.onload = check(); // Check the margins when the page is loaded

nextBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) - slideWidth) + 'px';
  check();
}

prevBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) + slideWidth) + 'px';
  check();
}
  • Wrapped the margin logic inside of a check() function
  • Check this function on page load and everytime the buttons are clicked

Thanks to Gustavo for his precious help!

Upvotes: 1

Gustavo Lopes
Gustavo Lopes

Reputation: 4174

You created the logic correctly. The problem is that you don't check the margin every time the button is clicked (javascript is not reactive by default).

You have to wrap the margin's logic into a function and then check the margin values every time the button is clicked.

const nextBtn = document.querySelector('#slideNext');
const prevBtn = document.querySelector('#slidePrev');
const slider = document.querySelector('.boxes-container');
const slideWidth = 250;

// Slider initial margin
slider.style.marginLeft = "0";

nextBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) - slideWidth) + 'px';
  checkMargin();
}

prevBtn.onclick = function() {
  slider.style.marginLeft = (parseInt(slider.style.marginLeft, 0) + slideWidth) + 'px';
  checkMargin();
}

function checkMargin() {
    if (slider.style.marginLeft == "0") {
      prevBtn.style.display = "none";
    } else if (slider.style.marginLeft == "-1000px") {
      nextBtn.style.display = "none";
    } else {
      nextBtn.style.display = "inline-block";
      prevBtn.style.display = "inline-block";
    }
}

There are other methods to make the DOM reactive, like MutationObserver. But it may be an overkill to this task.

Upvotes: 1

Related Questions