www.webdeveloper.com
Results 1 to 7 of 7

Thread: Cycle through Switch Cases

  1. #1
    Join Date
    Dec 2011
    Posts
    55

    Cycle through Switch Cases

    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?

  2. #2
    Join Date
    Mar 2011
    Posts
    1,139
    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).
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Dec 2011
    Posts
    55
    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.

  4. #4
    Join Date
    Dec 2011
    Posts
    55
    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;

  5. #5
    Join Date
    Mar 2011
    Posts
    1,139
    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:
    Code:
     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.
    Rick Trethewey
    Rainbo Design

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Lightbulb Alternative attempt...

    Another possible solution:
    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    // 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 < 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 += "<span id='underline'>Number</span>: 001<br>";
            str += "<span id='underline'>Name</span>: Bulbasaur<br>";
            str += "<span id='underline'>Type</span>: <span id='grass'>Grass</span><span id='poison'>Poison</span><br>";
            str += "<span id='underline'>Classification</span>: Seed Pokemon<br>";
            str += "<span id='underline'>Height</span>: 2'04\" <br>";
            str += "<span id='underline'>Weight</span>: 15 lbs<br>";
            str += "<span id='underline'>Description</span>:<br>";
            str += "A strange seed was planted on its back at birth. The plant sprouts and grows with this Pokemon.<br>";
            info.innerHTML = str;
            break;
    
      case "ivysaur": case "002":
    	picture.innerHTML = "";
    	img.src = "Images/ivysaur.png";
    	picture.appendChild(img);
            str += "<span id='underline'>Number</span>: 002<br>";
            str += "<span id='underline'>Name</span>: Ivysaur<br>";
            str += "<span id='underline'>Type</span>: <span id='grass'>Grass</span><span id='poison'>Poison</span><br>";
            str += "<span id='underline'>Classification</span>: Seed Pokemon<br>";
            str += "<span id='underline'>Height</span>: 3'03\" <br>";
            str += "<span id='underline'>Weight</span>: 29 lbs<br>";
            str += "<span id='underline'>Description</span>:<br>";
            str += "When the bulb on its back grows large, it appears to lose the ability to stand on its hind legs.<br>";
            info.innerHTML = str;
            break;
     }
    }
    </script>
    </head>
    <body>
    <input type="text" value="" id="pokedex">
    <button onclick="getResult()">Get Result</button>
    <p><div id="information"></div>
    <p><img id="image">
    </body>
    </html>

  7. #7
    Join Date
    Dec 2011
    Posts
    55
    Quote Originally Posted by rtrethewey View Post
    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:
    Code:
     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.

    I'm sorry I'm still pretty new at this. Can you give me an example of the code I would write/copy within each Case? I would really appreciate it.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles