Cycle through Switch Cases

@JustWhateverMar 13.2012

So as the title says what I’m looking to do is to be able to cycle through Switch cases. Let me go into a bit more detail.

I’ve created my code with a bunch of switch cases, each case representing an item. Each case is numbered, so say you type 25, click, and it comes up with item #25, it’ll show a picture and information about that item. What I want to happen is to somehow be able to click a ‘Previous’ or ‘Next’ button in order to go to the next or previous item. So if I’m on item 25, I’d like to be able to click ‘Next’ and go to item 26.

So is there a way to do so when the information is set up in Switch cases?

to post a comment

JavaScript

6 Comments(s) _↴

@rtretheweyMar 13.2012 — #It's difficult to know the exact solution without seeing at least some of your code, but you need to generate the 'Next' and 'Previous' buttons when you generate the content for 'it comes up with item #25', regardless of how your switch loop operates. Usually this requires replicating the URL in the link that was clicked on to invoke the function in the first place, but with the appropriate item number (item+1 and item-1, with checks for minimum and maximum values).

@JustWhateverauthorMar 13.2012 — #I'll link some code when I get home. What I'm basically doing for fun (might as well come out with it) is making a Pokemon Pokedex where the user types the Pokemon's name or number into the box via keyboard (or on-screen keyboard), hits the 'Search' button, and the information about the Pokemon (picture, number, type, etc) are brought up in a div that remains empty if no search has been done yet. Which means there are no URL's.

So what I'd like is, if they search for Pikachu (number 25) and his data comes up, to be able to cycle the Pokemon before or after from there. Though I don't know how I'd access the case information to make that happen, or even if it's possible.

But yeah again I'll link some code when I'm able.

@JustWhateverauthorMar 14.2012 — #Here is a bit of code below. So if I brought up case 1, is there any way for me to make code assign it to a button so that I can click it and it goes to case 2?

[CODE]
 function getResult() {
 
 var result = document.getElementById('pokedex').value;
 var info = document.getElementById('information');
 var picture = document.getElementById('image');
 var br = document.createElement("br");
 var img = document.createElement("IMG");
 
 
 
 switch (result.toLowerCase()) {
 
 case "bulbasaur": case "001": case "01": case "1":
 
  picture.innerHTML = "";
  img.src = "Images/bulbasaur.png";
  picture.appendChild(img);
 
 info.innerHTML = "<span id='underline'>Number</span>: 001"
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Name</span>: Bulbasaur"
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Type</span>: <span id='grass'>Grass</span><span id='poison'>Poison</span>"
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Classification</span>: Seed Pokemon"
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Height</span>: 2'04" "
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Weight</span>: 15 lbs"
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Description</span>:"
 info.appendChild(br)
 info.innerHTML += "A strange seed was planted on its back at birth. The plant sprouts and grows with this Pokemon."
 break;
 
 case "ivysaur": case "002": case "02": case "02":
 
  picture.innerHTML = "";
  img.src = "Images/ivysaur.png";
  picture.appendChild(img);
 
 info.innerHTML = "<span id='underline'>Number</span>: 002"
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Name</span>: Ivysaur"
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Type</span>: <span id='grass'>Grass</span><span id='poison'>Poison</span>"
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Classification</span>: Seed Pokemon"
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Height</span>: 3'03" "
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Weight</span>: 29 lbs"
 info.appendChild(br)
 info.innerHTML += "<span id='underline'>Description</span>:"
 info.appendChild(br)
 info.innerHTML += "When the bulb on its back grows large, it appears to lose the ability to stand on its hind legs."
 break;
 [/CODE]

@rtretheweyMar 14.2012 — #Overall, my suggestion would be to change the code so that the function getResult() accepts a parameter named 'result' instead of determining the value of result within the function itself. As in:

<i>
 </i> function getResult(result) {
 .
 .
 .
 }

and then add the code for creating the 'Previous' and 'Next' at the end of the function based on the value of 'result'.

But even as your code stands, you can simply insert that code at the end of each case: section based on the value of 'result'. You'll just have to replicate that code for each case: section - which is why I suggested the changes above. Exactly how you create the button is up to you. More than one way to skin a cat, as they say.

@JMRKERMar 14.2012 — #Another possible solution:

<i>
 </i>&lt;!DOC HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt; Untitled &lt;/title&gt;
 &lt;script type="text/javascript"&gt;
 // For: http://www.webdeveloper.com/forum/showthread.php?t=258063
 
 //padL()
 String.prototype.padL = function (c, n) {
 var t = "";
 for (var i = this.length; i &lt; n; i++) { t += c; }
 return t + this;
 }
 function getResult() {
 
 var result = document.getElementById('pokedex').value;
 result = result.padL('0',3);  alert(result);
 
 var info = document.getElementById('information');
 var picture = document.getElementById('image');
 var img = document.createElement("IMG");
 var str = '';
 switch (result.toLowerCase()) {
 case "bulbasaur": case "001":
 picture.innerHTML = "";
 img.src = "Images/bulbasaur.png";
 picture.appendChild(img);
 str += "&lt;span id='underline'&gt;Number&lt;/span&gt;: 001&lt;br&gt;";
 str += "&lt;span id='underline'&gt;Name&lt;/span&gt;: Bulbasaur&lt;br&gt;";
 str += "&lt;span id='underline'&gt;Type&lt;/span&gt;: &lt;span id='grass'&gt;Grass&lt;/span&gt;&lt;span id='poison'&gt;Poison&lt;/span&gt;&lt;br&gt;";
 str += "&lt;span id='underline'&gt;Classification&lt;/span&gt;: Seed Pokemon&lt;br&gt;";
 str += "&lt;span id='underline'&gt;Height&lt;/span&gt;: 2'04" &lt;br&gt;";
 str += "&lt;span id='underline'&gt;Weight&lt;/span&gt;: 15 lbs&lt;br&gt;";
 str += "&lt;span id='underline'&gt;Description&lt;/span&gt;:&lt;br&gt;";
 str += "A strange seed was planted on its back at birth. The plant sprouts and grows with this Pokemon.&lt;br&gt;";
 info.innerHTML = str;
 break;
 
 case "ivysaur": case "002":
 picture.innerHTML = "";
 img.src = "Images/ivysaur.png";
 picture.appendChild(img);
 str += "&lt;span id='underline'&gt;Number&lt;/span&gt;: 002&lt;br&gt;";
 str += "&lt;span id='underline'&gt;Name&lt;/span&gt;: Ivysaur&lt;br&gt;";
 str += "&lt;span id='underline'&gt;Type&lt;/span&gt;: &lt;span id='grass'&gt;Grass&lt;/span&gt;&lt;span id='poison'&gt;Poison&lt;/span&gt;&lt;br&gt;";
 str += "&lt;span id='underline'&gt;Classification&lt;/span&gt;: Seed Pokemon&lt;br&gt;";
 str += "&lt;span id='underline'&gt;Height&lt;/span&gt;: 3'03" &lt;br&gt;";
 str += "&lt;span id='underline'&gt;Weight&lt;/span&gt;: 29 lbs&lt;br&gt;";
 str += "&lt;span id='underline'&gt;Description&lt;/span&gt;:&lt;br&gt;";
 str += "When the bulb on its back grows large, it appears to lose the ability to stand on its hind legs.&lt;br&gt;";
 info.innerHTML = str;
 break;
 }
 }
 &lt;/script&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;input type="text" value="" id="pokedex"&gt;
 &lt;button onclick="getResult()"&gt;Get Result&lt;/button&gt;
 &lt;p&gt;&lt;div id="information"&gt;&lt;/div&gt;
 &lt;p&gt;&lt;img id="image"&gt;
 &lt;/body&gt;
 &lt;/html&gt;

@JustWhateverauthorMar 14.2012 — #Overall, my suggestion would be to change the code so that the function getResult() accepts a parameter named 'result' instead of determining the value of result within the function itself. As in:

<i>
 </i> function getResult(result) {
 .
 .
 .
 }

Also in #JavaScript _↴

<form onLoad="..." -- is this legal?Remove duplicate array elements AJAX radio buttons

Success!

Help @JustWhatever spread the word by sharing this article on Twitter...

Tweet This

Cycle through Switch Cases

6 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Cycle through Switch Cases

6 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #JavaScript _↴