Javascript run 2 functions on button click with multiple buttons and same class

Question

I have a portfolio grid that has a screenshot of past work in each grid item.

Currently on button click, it calls a function to scroll the screenshot and stop once it reaches the bottom of the image.

I need to reverse the scroll once the button is clicked again. The scroll is created by a setInterval. I have a class of "down" on the button which is removed on click.

I have an if statement that does not work to check if the class of "down" is present and run a scrollUp function.

This is a PHP loop so there are multiple buttons with same class.

I cannot use jQuery.

Thanks for any help!

HTML:

<ul>
  <li>
  <div class="image-container overflow-hidden height-500">
      <img class="item absolute pin-t w-full h-auto pin-l" 
src="/image.jpg"/>
  </div>
    <button class="portScroll down">Scroll Down</button>
</li>

<li class="web-design-portfolio">
    <div class="image-container overflow-hidden height-500">
        <img class="item absolute pin-t w-full h-auto pin-l"
          src="/image.jpg"/>
    </div>
      <button class="portScroll down">Scroll Down</button>
  </li>
</ul>

JS:

function scrollDown() {
var portImg = this.parentNode.parentNode.querySelector('img.item');
var height = portImg.clientHeight;

var pos = 0;
var id = setInterval(frame, 5);

function frame() {
    if (pos == height - 500) {
        clearInterval(id);
    } else {
        pos++;
        portImg.style.top = - + pos + 'px';
    }
}
for (const button of document.querySelectorAll('button.portScroll')) {
    button.classList.remove('down');
}
}

for (const button of document.querySelectorAll('button.portScroll')) {
    if (button.classList.contains("down")) { 
    button.addEventListener("click", scrollDown);
    } else {
    button.addEventListener("click", scrollUp); 

    }
}

Here is the working Codepen for scroll down:

https://codepen.io/completewebco/pen/bZeVoz

Pärt Johanson · Accepted Answer · 2019-03-03 18:05:19Z

1

I created a single function that does what is needed. I hope that is OK.

function scrollUpOrDown(_this, state) {
  var portImg = _this.parentNode.parentNode.querySelector('img.item');
  var height = portImg.clientHeight;

  if(state.id > -1) {
    clearInterval(state.id);
    state.dir *= -1;
  }

  if(state.pos < 0) {
    state.pos = 1;
  }
  state.id = setInterval(frame, 5);

  function frame() {
    if ((state.pos == height - 500 && state.dir > 0) || (state.pos == 0 && state.dir < 0)) {
      clearInterval(state.id);
    } else {
      state.pos += state.dir;
      portImg.style.top = -+state.pos + "px";
    }
  }
}

for (const button of document.querySelectorAll("button.portScroll")) {
  let scollingState = {
    pos: -1,
    id: -1,
    dir: 1
  };
  if (button.classList.contains("down")) {
    button.addEventListener("click", function(){
      scrollUpOrDown(this,scollingState);
    });
  }
}

https://codepen.io/prtjohanson/pen/QoEyQK

If you are wondering why/how it works, look at the output of this code

var array = [0,1,2,3,4,5];

for(const i in array) {
  setTimeout(function(){console.log(i)}, Math.random()*1000)
}

and read https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Scoping_rules_2

edited Mar 3, 2019 at 18:05

answered Mar 3, 2019 at 17:50

Pärt Johanson

1,6401 gold badge15 silver badges15 bronze badges

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

1 Comment

houstonaspen Over a year ago

Thank you very much

Collectives™ on Stack Overflow

Javascript run 2 functions on button click with multiple buttons and same class

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related