-1

I have found a way to display a portion of an array using arrayName.slice(start, end), i made a funtion to feed the start and end to the slice method so i can use it with onClick button to click next 3 element to show in HTML.

my problem is the increment funcion doesn't start with zero(0), it start with 3- 6, and when i press next it start from 6 - 9. it is working proberly but not starting from zero

    const array = ["a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14","a15"]

let next = {
        start: 0,
        end: 0,
        incrementby: 3,
        inc() {
          this.start = this.start = 0 ? 0 : this.start + this.incrementby;
          this.end = this.start + this.incrementby;
          console.log(this.start, this.end);
          displayHadith(this.start,this.end)
        },
      };
      
 function displayHadith(start,end) {
        var container = document.querySelector(".container");
        container.innerHTML = ""
        let some = array.slice(start, end);
         for (let element of some) {
          container.innerHTML +=`
          <div class="sharh" >${element}</div>
          `
         }
        }
<button onclick="next.inc()">clickNext</button>
<div class="container"></div>

New contributor
elbannhawy is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
5
  • You're incrementing your start and end (this.end = this.start + this.incrementby;) before you initially display it. Perhaps try moving this line to after displayHadith(this.start,this.end).
    – mykaf
    Commented yesterday
  • 2
    this.start = this.start = 0 should, since it appears in a ternary, probably be a comparison (== or ===) rather than assignment. Commented yesterday
  • mykaf: i've tried this but it gives me 3 - 0 the opposite result
    – elbannhawy
    Commented yesterday
  • You would need to increment the this.start as well.
    – mykaf
    Commented yesterday
  • David Thomas: if(this.start == 0){this.start = 0}else {this.start + this.incrementby} this.end = this.start + this.incrementby; displayHadith(this.start,this.end) it give my 0 - 3 and showed the first 3 but it doesn't increment
    – elbannhawy
    Commented yesterday

1 Answer 1

0

Add incrementby to start after changes:

const array = ["a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14","a15"]

let next = {
  start: 0,
  end: 0,
  incrementby: 3,
  inc() {
    this.end = this.start + this.incrementby;
    console.log(this.start, this.end);
    displayHadith(this.start,this.end);
    this.start += this.incrementby;
  },
};
      
 function displayHadith(start,end) {
  var container = document.querySelector(".container");
  container.innerHTML = ""
  let some = array.slice(start, end);
  for (let element of some) {
    container.innerHTML +=`
    <div class="sharh" >${element}</div>
    `
  }
 }
<button onclick="next.inc()">clickNext</button>
<div class="container"></div>

2
  • thank you imhvost for your reply i really appreciated it. is there a better way to achieve the same result?
    – elbannhawy
    Commented yesterday
  • There are many ways. I have shown you why your code is not working properly.
    – imhvost
    Commented 20 hours ago

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.