I want to have multiple sliders on the same page-CodePudding

This is what i tried to do i want the program to get the product number and then choose the right article to show, the first one works fine but the second one doesn't i think i need another implementation rather than using the parent element.

var ids = ["view_0", "view_1", "view_2", "view_3"]
let current_id = 0;

function next(product) {
 var parent =document.getElementById(ids[current_id]).parentElement.id;
  if(product==parent){
  let last_array_position = ids.length;
  document.getElementById(ids[current_id]).classList.remove("show");
  current_id  ;
  if (current_id >= last_array_position) {
    current_id = 0;
  }
  document.getElementById(ids[current_id]).classList.add("show");
}
}

<style>
  #1 img {
  display: none;
}

#1 img.show {
  display: block;
}
</style>

<!DOCTYPE html>
<html>

<head>
  <title>Multiple Slider</title>
</head>

<body>

  <article id="1">
    <img   id="view_0"></img>
    <img id="view_1"></img>
    <img id="view_2"></img>
    <img id="view_3"></img>
    <button><</button>
    <button onclick="next(1)">></button>
  </article>
    <article id="2">
      <img   id="view_0"></img>
      <img id="view_1"></img>
      <img id="view_2"></img>
      <img id="view_3"></img>
      <button><</button>
      <button onclick="next(2)">></button>



  </article>

</body>

Getting error:

Uncaught TypeError: Cannot read properties of null (reading 'classList')

var ids = ["view_0", "view_1", "view_2", "view_3"]
let current_id = 0;

function next() {
  let last_array_position = ids.lastIndexOf;
  document.getElementById(ids[current_id]).classList.remove("show");
  current_id = current_id   1;
  document.getElementById(ids[current_id]).classList.add("show");
  if (current_id < last_array_position) {
    current_id = 0;
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Multiple Slider</title>
</head>

<body>

  <div id="product1">
    <p  id="view_0">1</p>
    <p id="view_1">2</p>
    <p id="view_2">3</p>
    <p id="view_3">4</p>
    <button><</button>
    <button onclick="next()">></button>
  </div>

</body>

CodePudding user response：

The length of an array is in the length property, not lastIndexOf (that's a method that you use to search for the last occurrence of a value).

You need to check if the index exceeds that before you try to use the element.

Your if statement also has the wrong condition, it should be >=, not <.

var ids = ["view_0", "view_1", "view_2", "view_3"]
let current_id = 0;

function next() {
  let last_array_position = ids.length;
  document.getElementById(ids[current_id]).classList.remove("show");
  current_id  ;
  if (current_id >= last_array_position) {
    current_id = 0;
  }
  document.getElementById(ids[current_id]).classList.add("show");
}

#product1 p {
  display: none;
}

#product1 p.show {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>Multiple Slider</title>
</head>

<body>

  <div id="product1">
    <p  id="view_0">1</p>
    <p id="view_1">2</p>
    <p id="view_2">3</p>
    <p id="view_3">4</p>
    <button><</button>
    <button onclick="next()">></button>
  </div>

</body>

CodePudding user response：

You are trying to access the element which is going out of bounds because the condition check is happening later. You need to check the condition before accessing the classList and adding show to it. Also, you can keep last_array_position = ids.length outside your function as that is not gonna change.

Here's a more simpler solution for more than one slider section in a page:

function next(productId) {
  var tags = document.getElementById(productId).getElementsByTagName("p");
  var index;
  for (let i = 0; i < tags.length; i  ) {
    if (tags[i].className == "show") {
      index = i;
      break;
    }
  }
  tags[index].classList.remove("show")
  index = (index   1) == tags.length ? 0 : index   1;
  tags[index].classList.add("show")
}

p {
  display: none;
}

p.show {
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <title>Multiple Slider</title>
</head>

<body>

  <div id="product1">
    <p  id="view_1_0">1</p>
    <p id="view_1_1">2</p>
    <p id="view_1_2">3</p>
    <p id="view_1_3">4</p>
    <button><</button>
    <button onclick="next('product1')">></button>
  </div>

  <div id="product2">
    <p  id="view_2_0">1</p>
    <p id="view_2_1">2</p>
    <p id="view_2_2">3</p>
    <p id="view_2_3">4</p>
    <button><</button>
    <button onclick="next('product2')">></button>
  </div>

</body>