show next item from array onclick in JavaScript

Question

Could someone explain to me how to show elements from Array?

What I should use to complete this small "Testimonials Project."

For now, onclick function works but inappropriate:
-works after second click
-shows only 2 opinions from Array

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--  I used AI generated faces from this website: https://www.thispersondoesnotexist.com/image  --> 
<body>
  <h3>CLIENT</h3>
    <h1>TESTIMONIALS</h1>
      <h5>Mercedes w124 coupe</h5>

        <div class="container" data-index="0">
          <div class="img" id="img"></div>
            <p class="name" id="names"></p>
            <p class="text" id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <i class='fas fa-quote-left' style='font-size:36px'></i>
            <button class="left"  onclick="next('left')"><i class='fas fa-angle-left'></i></button>
            <button class="right" onclick="next('right')"><i class='fas fa-angle-right'></i></button>
        </div>
</body>


var opinions = [
  { name: "Carol",
    text: "Roomy and hard wearing inside, solid build quality that disguises miles well, still has class especially in estate and coupe form",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Alex",
    text: "Strong, reliable, comfortable, well-built, safe. Bigger, more modern car than W123.",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Jordan",
    text: "Extremely good looking coupe and convertible, with nice pillarless side window arrangement,solid build quality that disguises miles well, good ones are still capable of turning heads",
    img:  "https://www.thispersondoesnotexist.com/image"
  }];

var element = document.getElementById("img");
var i = 0;
function next(direction) {
 if(direction === 'right'){
    element.style.backgroundImage  ="url('"+ opinions[i++].img +"')";
    document.getElementById("names").innerHTML = opinions[i].name;
    document.getElementById("texts").innerHTML =  opinions[i].text;
 } else {
    element.style.backgroundImage  ="url('"+ opinions[i--].img +"')";
    document.getElementById("names").innerHTML = opinions[i].name;
    document.getElementById("texts").innerHTML =  opinions[i].text;
    }
};

Ivan86 · Accepted Answer · 2020-04-20 18:42:32Z

You are incrementing the value of i before checking if the array has the element.

And also, with this line

opinions[i++].img

you are getting the options[1].img on first click, because you've defined i to start at 0.

Check below:

var opinions = [
  { name: "Carol",
    text: "Roomy and hard wearing inside, solid build quality that disguises miles well, still has class especially in estate and coupe form",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Alex",
    text: "Strong, reliable, comfortable, well-built, safe. Bigger, more modern car than W123.",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Jordan",
    text: "Extremely good looking coupe and convertible, with nice pillarless side window arrangement,solid build quality that disguises miles well, good ones are still capable of turning heads",
    img:  "https://www.thispersondoesnotexist.com/image"
  }];

var element = document.getElementById("img");
var i = -1; // start with negative value

function next(direction) {
  if(direction === 'right') {
    if(opinions[i+1]) {  // check if element exists before incrementing i
      i++;
      element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
      document.getElementById("names").innerHTML = opinions[i].name;
      document.getElementById("texts").innerHTML =  opinions[i].text;
    }
  } else {
    if(opinions[i-1]) {
      i--;
      element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
      document.getElementById("names").innerHTML = opinions[i].name;
      document.getElementById("texts").innerHTML =  opinions[i].text;
    }
  }
}

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--  I used AI generated faces from this website: https://www.thispersondoesnotexist.com/image  --> 

<h3>CLIENT</h3>
<h1>TESTIMONIALS</h1>
<h5>Mercedes w124 coupe</h5>

<div class="container" data-index="0">
  <div class="img" id="img"></div>
    <p class="name" id="names"></p>
    <p class="text" id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <i class='fas fa-quote-left' style='font-size:36px'></i>
    <button class="left"  onclick="next('left')"><i class='fas fa-angle-left'></i></button>
    <button class="right" onclick="next('right')"><i class='fas fa-angle-right'></i></button>
</div>

messerbill · Accepted Answer · 2020-04-20 18:44:49Z

0

Your counter is a bit wrong. I also recommend to reset the counter when the end is reached:

var opinions = [
  { name: "Carol",
    text: "Roomy and hard wearing inside, solid build quality that disguises miles well, still has class especially in estate and coupe form",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Alex",
    text: "Strong, reliable, comfortable, well-built, safe. Bigger, more modern car than W123.",
    img:  "https://www.thispersondoesnotexist.com/image"
  },{ 
    name: "Jordan",
    text: "Extremely good looking coupe and convertible, with nice pillarless side window arrangement,solid build quality that disguises miles well, good ones are still capable of turning heads",
    img:  "https://www.thispersondoesnotexist.com/image"
  }];

var element = document.getElementById("img");
var i = -1;
function next(direction) {
 if(direction === 'right'){
    i = i < opinions.length - 1 ? i + 1 : 0
    element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
    document.getElementById("names").innerHTML = opinions[i].name;
    document.getElementById("texts").innerHTML =  opinions[i].text;
 } else {
    i = i > 0 ? i - 1 : opinions.length - 1
    element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
    document.getElementById("names").innerHTML = opinions[i].name;
    document.getElementById("texts").innerHTML =  opinions[i].text;
    }
};

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<h3>CLIENT</h3>
    <h1>TESTIMONIALS</h1>
      <h5>Mercedes w124 coupe</h5>

        <div class="container" data-index="0">
          <div class="img" id="img"></div>
            <p class="name" id="names"></p>
            <p class="text" id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <i class='fas fa-quote-left' style='font-size:36px'></i>
            <button class="left"  onclick="next('left')"><i class='fas fa-angle-left'></i>prev</button>
            <button class="right" onclick="next('right')"><i class='fas fa-angle-right'></i>next</button>
        </div>

answered Apr 20, 2020 at 18:44

messerbill

5,6391 gold badge31 silver badges39 bronze badges

2 Comments

konrad Over a year ago

thank you very much for resolving this. Could you tell me like I`m 5 years old -> why you used this line of code ``` i = i < opinions.length - 1 ? i + 1 : 0 ``` and what exactly it means step by step.

messerbill Over a year ago

@KonradSzymanski :D I'll try. This is called a ternary operator and is used as an inline if-expression. The schema is myVariableToSet = myCondition ? myTrueCase : myFalseCase. So what i wrote there could also be written like so: if (i < opinions.length - 1) { i = i + 1 } else { i = 0 }. I hope this clarified that stuff a bit. Here is a MDN link: developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

Raul Marquez · Accepted Answer · 2020-04-20 19:12:02Z

I just tested it out, it works fine. On the "it only shows two testimonials" behavior, maybe it seems that way because on first load it doesn't automatically show the first testimonial, so when you click right you can only advance to the last two, but if you start clicking left you'll eventually be able to reach the first one.

I modified your code to auto-show the first testimonial on page load:

	var i = -1;
	var opinions = [
	{ name: "Carol",
		text: "Roomy and hard wearing inside, solid build quality that disguises miles well, still has class especially in estate and coupe form",
		img:  "https://www.thispersondoesnotexist.com/image"
	},{ 
		name: "Alex",
		text: "Strong, reliable, comfortable, well-built, safe. Bigger, more modern car than W123.",
		img:  "https://www.thispersondoesnotexist.com/image"
	},{ 
		name: "Jordan",
		text: "Extremely good looking coupe and convertible, with nice pillarless side window arrangement,solid build quality that disguises miles well, good ones are still capable of turning heads",
		img:  "https://www.thispersondoesnotexist.com/image"
	}];

	function next(direction) {
	var element = document.getElementById("img");
	 if(direction === 'right'){
	 i++;
			if (element != undefined) element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
			document.getElementById("names").innerHTML = opinions[i].name;
			document.getElementById("texts").innerHTML =  opinions[i].text;
	 } else {
	 i--;
			if (element != undefined) element.style.backgroundImage  ="url('"+ opinions[i].img +"')";
			document.getElementById("names").innerHTML = opinions[i].name;
			document.getElementById("texts").innerHTML =  opinions[i].text;
			}
	};

	(function() {
		next('right');	 
	})();

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap" rel="stylesheet">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<!--  I used AI generated faces from this website: https://www.thispersondoesnotexist.com/image  --> 
<body>
  <h3>CLIENT</h3>
    <h1>TESTIMONIALS</h1>
      <h5>Mercedes w124 coupe</h5>

        <div class="container" data-index="0">
          <div class="img" id="img"></div>
            <p class="name" id="names"></p>
            <p class="text" id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <i class='fas fa-quote-left' style='font-size:36px'></i>
            <button class="left"  onclick="next('left')"><i class='fas fa-angle-left'></i></button>
            <button class="right" onclick="next('right')"><i class='fas fa-angle-right'></i></button>
        </div>
</body>

You still have to handle when the array is empty and when clicking out of index.

EDIT: Small adjustment on index i.

Hope it helps.

Collectives™ on Stack Overflow

show next item from array onclick in JavaScript

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related