Javascript - Get array value from string

Question

I was wondering if there was any way to get a value of an array, based on a string, and display the next value in the array.

<p id="current">page1</p>

<p id="next"></p>

<script>
var page = ["page1", "page2", "page3", "page4", "page5"];
if(document.getElementById("current") == page[0]){
  document.getElementById("next").innerhtml = page[1]
};
</script>

That's what I have as the general idea. However, it would be a lot of if statements, and it wouldn't look pretty. So I was wondering if there would be a way to replicate this sort of function, without it including too many if statements.

Get the numeric value from the current page and then use that as the index for the page in the array. ie getting the 1 from page one and using that as an index would lead to the next page = page[1]. Or use a loop to see what page is the current page and then the next item in the array is the next page. — Craicerjack
– Craicerjack, Commented Dec 1, 2015 at 11:17
Use a for loop to iterate over the array & use if condition. — Abhash Upadhyaya
– Abhash Upadhyaya, Commented Dec 1, 2015 at 11:17
document.getElementById("next").innerhtml = page[++page.indexOf(document.getElementById("current").innerhtml)] ? — SlashmanX
– SlashmanX, Commented Dec 1, 2015 at 11:18

Nebula · Accepted Answer · 2015-12-01 11:23:57Z

Combining code with comments makes for a great way to learn:

// This is the list of pages you have.
var pages = ["page1", "page2", "page3", "page4", "page5"];

// We use the innerText attribute of the #current node to find out
// what the current page is as a string.
var current = document.getElementById("current").innerText;

// Use the indexOf method of pages to get the index of the current
// page in the list of pages.
var index = pages.indexOf(current);

// Now, check if there is a next page. We do so by checking if current
// is not the last page in the list, or rather, there is at least one
// more page in the list.
if (index < pages.length - 1) {

  // If so, we set next to that page. Note that you can put an
  // expression for the key when using bracket notation here!
  var next = pages[index + 1];

} else {

  // Otherwise, use other text.
  var next = "No more pages :(";

}

// Now set the innerHTML of the #next node to the value of next.
document.getElementById("next").innerHTML = next;

You're a star! Thanks for the comments on the code too, it's really helpful, and works like a charm :)

Gerrit Bertier · Accepted Answer · 2015-12-01 11:19:06Z

You could use the .indexOf method (more info) to find the array index of the element you're looking for.

Fiddle: http://jsfiddle.net/0fu3dydy/

JavaScript

var page = ["page1", "page2", "page3", "page4", "page5"];
var currentPageIndex = page.indexOf(document.getElementById("current").innerHTML);

if (currentPageIndex < page.length - 1) {
    document.getElementById("next").innerHTML = page[currentPageIndex + 1];
} else {
    // Do something when the current element is also the last
}

phillercode · Accepted Answer · 2015-12-01 11:19:13Z

0

Just include a for statement

<p id="current">page1</p>

<p id="next"></p>

<script>
var page = ["page1", "page2", "page3", "page4", "page5"];
for (i=0;i=page.length-1;i++) {
   if(document.getElementById("current") == page[i]){
    document.getElementById("next").innerhtml = page[i+1]
  };
}

answered Dec 1, 2015 at 11:19

phillercode

3392 silver badges14 bronze badges

Comments

Girish · Accepted Answer · 2015-12-01 11:20:19Z

0

you can use indexOf() function when you multiple values in array.

var currentIndex = page.indexOf(document.getElementById("current").textContent);
if(currentIndex > -1){
   if((currentIndex + 1) == page.length){
      // for last element
   }else{
     document.getElementById("next").innerhtml = page[currentIndex + 1];
   }
}

answered Dec 1, 2015 at 11:20

Girish

12.1k3 gold badges37 silver badges54 bronze badges

Collectives™ on Stack Overflow

Javascript - Get array value from string

4 Answers 4

2 Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Related