Javascript: Button onclick showing next div-CodePudding

I'm trying to make a thing with JavaScript that where I click on a button it shows the next div and the one after that and more. So it's a 'next' button. It would also be nice to have a 'previous' button.

I've tried everything, but can't seem to find the solution. I'd really appreciate some advice or help, thank you!

Any help please?

<div id="wrapper">
    <div >
      <input id="button-next" type="button" value="next"/>
      <img src="photos/bookcover/Alluredbyyou.jpg" alt="" srcset="">
      <p>ALLURED BY YOU</p>
      <span>Lorem text part 1</span>
    </div>
    <div >
      <input id="button-next" type="button" value="next"/>
      <img src="photos/bookcover/Notyourmarrysue.jpg" alt="" srcset="">
      <p>Rebecca Frost</p>
      <span>Lorem text part 2</span>
    </div>  
  </div>

  <script>
$(document).on('click','#button-next', function() {
     $('.featured').removeClass('featured2').next('.featured').addClass('active');
});

</script>

.featured, .featured2 {
  float: left;
  margin-left: 16%;
  margin-top: 4%;
  width: 980px;
  height: 450px;
  background-color: #CFD0CD;

}
.featured img, .featured2 img {
  width: 230px;
  height: 360px;
  margin-top:4%;
  margin-left: 5%;
  float: left;

}
.featured p, .featured2 p{
  float: right;
  margin-top: 5%;
  margin-bottom: 0%;
  margin-right: 51%;
  width: 18%;
  
  font-size: 20px;
  font-family:'poppins';
  text-align: left;

}
.featured span, .featured2 span {
  float: right;
  margin-top: 0%;
  margin-right: 4%;
  width: 65%;

  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;

    height: 75%;
  text-align: left;
  word-wrap: break-word;
  word-break:normal;
  line-height: 30px;
  white-space: inherit;

}
#button-next{
    color: #000000;
    float: right;
    font-size: 19px;
    border: 3px solid #000000;
    padding: 5px 50px;
    margin-right: 0%;
    margin-top: 0%;
    letter-spacing: 1px;
    cursor: pointer;
    transform: scale(1.0);
    transition: ease-in-out 0.5s;

  }
  #button-next:hover {
    transform: scale(0.9);
    transition: ease-in-out 0.5s;
  }

CodePudding user response：

Here's a simple solution in Vanilla JavaScript

const scrollButtons = document.querySelectorAll('.slide-btn')
const slideItems = Array.apply(
    null,
  document.querySelectorAll('.slide-item')
)

const getActiveIndex = () => slideItems.findIndex(item => {
    return item.classList.contains('active')
})

scrollButtons.forEach(btn => {
    btn.addEventListener('click', ({ target }) => {
    const activeIndex = getActiveIndex()
    slideItems[activeIndex].classList.remove('active')

    let newActiveIndex
    if (target.id === 'previous') {
      newActiveIndex = activeIndex === 0 ? slideItems.length - 1 : activeIndex - 1
    } else {
      newActiveIndex = activeIndex === slideItems.length - 1 ? 0 : activeIndex   1
    }

    slideItems[newActiveIndex].classList.add('active')
  })
})

.featured, .featured2 {
  float: left;
  margin-left: 16%;
  margin-top: 4%;
  width: 980px;
  height: 450px;
  background-color: #CFD0CD;

}
.featured img, .featured2 img {
  width: 230px;
  height: 360px;
  margin-top:4%;
  margin-left: 5%;
  float: left;

}
.featured p, .featured2 p{
  float: right;
  margin-top: 5%;
  margin-bottom: 0%;
  margin-right: 51%;
  width: 18%;
  
  font-size: 20px;
  font-family:'poppins';
  text-align: left;

}
.featured span, .featured2 span {
  float: right;
  margin-top: 0%;
  margin-right: 4%;
  width: 65%;

  font-size: 18px;
  font-family: Arial, Helvetica, sans-serif;

    height: 75%;
  text-align: left;
  word-wrap: break-word;
  word-break:normal;
  line-height: 30px;
  white-space: inherit;

}

#wrapper div:not(.active) {
  display: none;
}

.slide-btn {
    color: #000000;
    float: right;
    font-size: 19px;
    border: 3px solid #000000;
    padding: 5px 50px;
    margin-right: 0%;
    margin-top: 0%;
    letter-spacing: 1px;
    cursor: pointer;
    transform: scale(1.0);
    transition: ease-in-out 0.5s;

  }
  .slide-btn:hover {
    transform: scale(0.9);
    transition: ease-in-out 0.5s;
  }

<div id="wrapper">
    <input  id="previous" type="button" value="previous"/>
    <input  id="next" type="button" value="next"/>
    <div >
      <img src="photos/bookcover/Alluredbyyou.jpg" alt="" srcset="">
      <p>ALLURED BY YOU</p>
      <span>Lorem text part 1</span>
    </div>
    <div >
      <img src="photos/bookcover/Notyourmarrysue.jpg" alt="" srcset="">
      <p>Rebecca Frost</p>
      <span>Lorem text part 2</span>
    </div>  
  </div>

CodePudding user response：

You need to maintain an id variable to so you can tell where in the slideshow you are.

So, add ids to your featured items in the form of data attributes, and then create a function that initialises an id variable to 1, and then returns a new function that adds as the actual listener.

Then based on the id you can show/hide the relevant featured sections, and also disable/enable the buttons (which are now in their own separate section) at the same time.

// Call `handleClick` which sets ups the initial id
// and then returns a new function that which will
// called whenever a button is clicked on
$(document).on('click', 'button', handleClick());

function handleClick() {

  // Initialise the id
  let id = 1;

  // Get the number of featured items from the DOM
  // We'll be using this number to compare against the id
  const items = $('.featured').length;

  // Utility function to toggle a show class for
  // featured item who has a matching data id
  function toggleFeatured(id) {
    $(`.featured[data-id=${id}]`).toggle('show');
  }

  // Disables/enables the buttons depending
  // on the id
  function updateButtons(id) {
    $('button').prop('disabled', false);
    if (id === 1) {
      $('.previous').prop('disabled', true);
    }
    if (id === items) {
      $('.next').prop('disabled', true);
    }
  }

  // This is the function that is returned
  // to the listener
  return function() {

    // It grabs the button class (previous/next)
    const cl = $(this).attr('class');

    // And depending on which it is first use
    // the utility function to toggle (remove) the
    // `show` class from the current featured item...
    toggleFeatured(id);

    // ...increase the id...
    if (cl === 'previous' && id > 1) --id;
    if (cl === 'next' && id < items)   id;

    // ...then toggle the `show` on the item that
    // matches the new id, and update the buttons
    toggleFeatured(id);
    updateButtons(id);

  }

}

.featured { display: none; }
.show { display: block; }
.buttons { margin-bottom: 1em; }
button:hover { cursor: pointer; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div >
  <button  type="button" disabled>Previous</button>
  <button  type="button">Next</button>
</div>

<div id="wrapper">
  <div data-id="1" >
    <img src="https://dummyimage.com/200x100/000/fff">
    <p>ALLURED BY YOU</p>
    <span>Lorem text part 1</span>
  </div>
  <div data-id="2" >
    <img src="https://dummyimage.com/200x100/cf5fcf/000000">
    <p>Rebecca Frost</p>
    <span>Lorem text part 2</span>
  </div>
  <div data-id="3" >
    <img src="https://dummyimage.com/200x100/cf815f/000000">
    <p>Bob Marley</p>
    <span>Lorem text part 3</span>
  </div>
</div>