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

2

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;

answered Dec 1, 2015 at 11:23

Nebula

7,2604 gold badges24 silver badges45 bronze badges

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

2 Comments

Jordan Over a year ago

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

Nebula Over a year ago

Thanks, no problem. :)

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

0

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
}

answered Dec 1, 2015 at 11:19

Gerrit Bertier

4,2412 gold badges23 silver badges38 bronze badges

Comments

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

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related