How do I make a next button that shows different text based on how many times it's clicked?

Question

I'm trying to make a button that goes to the next div element when clicked like a navigation button. I was able to make it go to the next div element a first time but I don't know how to get it to keep going to another text when it is clicked. I hope you understand the question.
https://code.sololearn.com/WLae314aQLIx/?ref=app

Answer 1

Thanks. It's not really the best solution, but something to get you moving along with it. Just to throw a stick in the spokes after you gave me a compliment, imagine if you have 10+ sections. With that type of solution, you'd end up having to deactivate all of the other elements just to active one. So if you had 20 sections, you're deactivating 19 and activating 1, which doesn't make sense to do it this way.

Give me a moment and I'm going to type up something else for you that's more plausible for something that may scale larger. If nothing more, it'll let you see some other examples of accomplishing the same thing.

Also, to answer your question, it's just from messing with the stuff for years. Over time you'll see how to do the same things in various ways, each of which can be more appropriate for certain situations you find yourself in. As well, as a future programmer, you'll spend a LOT of hours debugging and wondering how to get stuff to work until you get it to work; that's when you learn the most, I believe. Eventually when you're faced with a program, you already know various ways you can accomplish it because it was a problem you faced and resolved in the past. As you can see, messing things up or failing at something isn't ever a bad thing, it's an opportunity to grow into something more than you were so always take the lesson and don't get hung up on failure.

Anyways, give me a min and I'll post up more code.

Answer 2

Just to go in the same direction that you were taking with it, below is a simple solution to it. It'll keep track of where you're at and change things accordingly. It'll also start over once you reach the end.

However, just note there are a LOT of ways that you can go about this. You could store references in an array and cycle through it, load it from a database instead and the just script the content into it (can do a lot this way, such as allow user created content), store reference in the session/cookie, have individual pages and load the data into the container, use classes on the div's and keep track that way / change what to display, etc... As you can see, there are really a lot of ways to do it and that's just stuff I thought off while typing this. Depending upon what you're doing overall is how you'll end up basing what techniques to use.

Also, I recommend jQuery. You can do so much stuff with it and do it much quicker than vanilla JS. If you decide to deal with dynamic content, it'll be insanely helpful also.

Best of luck!

https://code.sololearn.com/W5tDGvO56jG1/#html

var nextElement = 0;
var maxElements = 2;

next.onclick=function(){
// Move to next element
++nextElement;

// Check if we're at the max and then start over
if(nextElement == maxElements){
nextElement = 0;
}

// Check the element and displaly it
switch(nextElement){
case 0: // Intro
intro.style.display="block";
SQL.style.display="none";
break;

case 1: // SQL
SQL.style.display="block";
intro.style.display="none";
break;

// etc...
}
}

Answer 3

Jakob Marley I am amazed by your solution. I wish I'd have thought of it myself. As a future programmer I will one day have to write code by myself so I gotta ask how you thought of it.

Answer 4

Can you tell me why the method isn't working here?

https://code.sololearn.com/WLae314aQLIx/?ref=app