Simple JS prev-next navigation of innerHTML changes

Question

Given this very simple framework, what are some approaches to replacing the word-list navigation of the innerHTML content with prev/next buttons? I have tried to implement nextElementSibling - if that's the best solution - but it's over my head.

If it makes a difference, I do want to eventually replace the innerHTML content with fairly complex formatted html blocks, but I would like to understand a simple solution that can accomodate very simple content like this in any case. Many thanks for your assistance.

function first() {
  document.getElementById("content").innerHTML = "dog";
}

function second() {
  document.getElementById("content").innerHTML = "cat";
}

function third() {
  document.getElementById("content").innerHTML = "fish";
}

body {
  font-size: 30px;
  padding: 30px;
  line-height: 2em;
}

<div id="content"></div>
<span onclick="first()">first</span>
<span onclick="second()">second</span>
<span onclick="third()">third</span>

Think about using array of data instead and getting current value by incrementing/decrementing an index variable `['dog',fish','cat'][1]// returns "fish"` — charlietfl, Jul 19 '20 at 16:27
So instead of first second third you want prev and next button(functional)? — Ayubhai Shah, Jul 19 '20 at 16:28
@charlietfl - I have no idea how to do this. Also I would be concerned about the complex html blocks in the array, although maybe it's no more problematic than using them in this context. In any case I have no idea how to do this. Thanks — , Jul 19 '20 at 16:28
So it requires you do learn how to work with arrays first and will take some research and time spent testing each step. SO is not really a *"how to"* tutorial service or a free code writing service. Find some tutorials on how to use arrays for content sliders for example. This whole question is just too broad for this site based on guidelines in the [help]. Learning how to code requires a lot of research time spent....some of it will overwhelm you and get you deep in over your head but also give you knowledge about what can be done — charlietfl, Jul 19 '20 at 16:29
Ok, thanks, I thought there would be a standard approach for this, it seems like such a fundamental and common thing. I found some solutions online going back to 2005! but I assume these are outmoded. Thanks anyway. — , Jul 19 '20 at 16:50
Those solutions will still give you the basic ground work as well as show you some of the basic logic involved. The term *"standard approach"* also depends on what your current knowledge level is. Working with arrays is a javascript fundamental — charlietfl, Jul 19 '20 at 17:20

score 0 · Accepted Answer · answered Jul 19 '20 at 16:57

Add the image for the buttons and put an onclick event on them.Call prev() for previous text and next() for next text

var i=0;
var text=["dog","cat","fish"];
document.getElementById("content").innerHTML=text[0];


function prev(){
i-=1; 
document.getElementById("content").innerHTML=text[i];
}


function next(){
i+=1; 
document.getElementById("content").innerHTML=text[i];
}

Put the above code in the script tag and put a few control statements so that the value of i will always stay in a given range

This is working Ayubhai. धन्यवाद from Pushkar, Raj. — , Jul 19 '20 at 17:40

Simple JS prev-next navigation of innerHTML changes

1 Answers1