Display different text values in an array with a button

Question

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>

manjiro sano · Accepted Answer · 2022-05-20 14:26:23Z

1

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>

answered May 20, 2022 at 14:26

manjiro sano

8428 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

manjiro sano Over a year ago

I am glad I was able to help! @Dominik-Dachs :)

manjiro sano · Accepted Answer · 2022-05-20 14:25:34Z

1

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

edited May 20, 2022 at 14:25

answered May 20, 2022 at 12:12

manjiro sano

8428 silver badges20 bronze badges

6 Comments

Dominik-Dachs Over a year ago

something similar yes, but only one value of the array should be displayed at a time

manjiro sano Over a year ago

Hey, @Dominik-Dachs just edited my comment, is that what you need?

manjiro sano Over a year ago

Great, I am glad I was able to help! :D

Dominik-Dachs Over a year ago

I have one more question, can I ask you as well? @manjiro sano

manjiro sano Over a year ago

Yah sure, go ahead @Dominik-Dachs

|

Collectives™ on Stack Overflow

Display different text values in an array with a button

Follow up Question

2 Answers 2

Follow up answer:

1 Comment

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Follow up Question

2 Answers 2

Follow up answer:

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related