Currently all values in the array are displayed at once when clicking on one of the two buttons. My goal is that the first value is displayed by default and with next/previous the next/previous array entry is displayed.

How can I realize realize this simply?

var array = ["text1", "text2", "text3"];

    function next(){
        //Next text in Array
        document.getElementById('text').innerHTML = array.join('<br />');
    }

    function prev(){
        //Previous text in Array
        document.getElementById('text').innerHTML = array.join('<br />');
    }

<div id="siggen">
    <div style="background-color: orange; height: 150px; width: 300px" id="content">
        <p id="text"></p>
    </div>
    <button id="btnPrev" onclick="prev()">Previous</button>
    <button id="btnNext" onclick="next()">Next</button>
</div>

---

Follow up Question

I looked at the link below from the answer. I have now added new datas to my array and would like to output the id in the left column and the name in the right column of my div.

The name is output correctly in the right column. But the id is not displayed but undefined is displayed. What is the reason for this?

The default values do not work yet either.

const arr =  [{_id:1,name:"T-Rex"},{_id:3,name:"Predator X"},{_id:4 ,name:"Velociraptor"},{_id: 6, name:"Triceratops"}]

    let currentIndex = 1;
    let currentName = arr[0].name;

    // initial log
    log(currentId)
    log(currentName);

    function next(){
        move();
    }

    function previous(){
        move(false);
    }

    function move(advance = true){
        currentIndex = (currentIndex   (advance ? 1 : -1)   arr.length) % arr.length;
        currentName = arr[currentIndex].name;
        currentId = arr[currentIndex].id;
        log();
    }

    function log(){
        document.getElementById('text').innerHTML = currentName;
        document.getElementById('id').innerHTML = currentId;
    }

<div style="background-color: orange; height: 300px; width: 500px" id="content">
    <div style="background-color: green; height: 100%; width: 250px; float: left">
        <p id="id"></p>
    </div>
    <div style="background-color: lightblue; height: 100%; width: 250px; float: right">
        <p id="text"></p>
    </div>
</div>
<button onclick="previous();">Previous</button>
<button onclick="next();">Next</button>

CodePudding user response：

Follow up answer:

const arr =  [{_id:1,name:"T-Rex"},{_id:3,name:"Predator X"},{_id:4 ,name:"Velociraptor"},{_id: 6, name:"Triceratops"}]

    let currentIndex = 1;
    let currentId = arr[0]._id;
    let currentName = arr[0].name;

    // initial log
    log(currentId, currentName)

    function next(){
        move();
    }

    function previous(){
        move(false);
    }

    function move(advance = true){
        currentIndex = (currentIndex   (advance ? 1 : -1)   arr.length) % arr.length;
        currentName = arr[currentIndex].name;
        currentId = arr[currentIndex]._id;
        log(currentId, currentName);
    }

    function log(currentId, currentName){
         document.getElementById('id').innerHTML = currentId;
        document.getElementById('text').innerHTML = currentName;
    }

<div style="background-color: orange; height: 300px; width: 500px" id="content">
    <div style="background-color: green; height: 100%; width: 250px; float: left">
        <p id="id"></p>
    </div>
    <div style="background-color: lightblue; height: 100%; width: 250px; float: right">
        <p id="text"></p>
    </div>
</div>
<button onclick="previous();">Previous</button>
<button onclick="next();">Next</button>

CodePudding user response：

Something like this?

var array = ["text1", "text2", "text3"];


let currentIndex = 0;
let currentId = array[0];

log(currentId);

function next(){
  move();
}

function previous(){
  move(false);
}

function move(advance = true){
  currentIndex = (currentIndex   (advance ? 1 : -1)   array.length) % array.length;
  currentId = array[currentIndex];
  log(currentId);
}

function log(currentId){
document.getElementById('text').innerHTML = currentId;
}

<p id="text"></p>
<button onclick="next();">Next</button>
<button onclick="previous();">Previous</button>

Also, I got the code from this question, I only changed the code to make it display the text on the tag p