JavaScript problem with switching tabs
I'm working on a FrontLoops JavaScript challenge. You should be able to cycle through three elements by clicking on the Change tab button. You should also be able to type in a number from 1 to 3, representing each tab index. Right now, I can cycle through the elements with the button but once I type in a value, I can't cycle anymore. Can anyone take a look and help me figure out what I'm doing wrong?
https://codepen.io/savvystrider/pen/eYQQqqK
4 Replies
What I'm seeing is that the text input doesn't clear, which means the button keeps pushing you to the index you entered
You can manually remove the index from the text field and cycle works again, though you have to go through a full set before the picked element clears
You can set the input to '' in your click handler if you want it to clear automatically
There are a few things happening which need re-touching.
As @jochemm (who beat me to it as usual) says, the input isn't clearing so that is the value that the code is using when you click on the button.
However, even if you manually delete the value, the code needs to either reset to 0 or, probably preferable, continue from that tab, of course hiding the previously selected tab.
This is not working for 2 reasons:
1. When using a user defined value you are not updating the previousElement value so the cycleElements() function is clearing the previously defined "previousElement" (if it has been sent) and not the current one.
2. Neither are you updating the counter so again, it "thinks" that it is still on the one set by the last cycleElements() call.
I would suggest that you simplify your code in the following way:
- When the button is clicked you remove the "active" state from ALL of the tab contents, regardless of whether they are the selected one or not.
- Move the counter increase and counter reset logic into the button function so that it always gets called.
I have forked your code and made some changes (based on what you have, it is not necesarrily the way I would actually do this). I can share if you are interested.
Thank you! Didn’t even think of that
Thank you for going through it. I’ll try implementing your suggestions - I could def use a different approach. Feel free to share your version.
https://codepen.io/cbolson/pen/VwVJbxd
This is what I did based on your code. I have commented it to explain what I did