[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Making multiple <DIV> visible and hidden

Posted on 2004-11-03
4
Medium Priority
?
232 Views
Last Modified: 2008-02-01
I have a javascript that's supposed to shuffle through several html panels, making some visible and some invisible.  I keep getting failed errors on each of the pages when I hit the buttons connected to the script... anybody see where my problem is?

<script language="JavaScript">
            function doChanger(){
            var a0Panel = document.getElementById('contactpanel');
            var a1Panel = document.getElementById('billingpanel');
            var a2Panel = document.getElementById('categoriespanel');
            var a3Panel = document.getElementById('logosdescriptionspanel');
            var viewvaluekey = document.getElementById('viewidvalidator');
            var viewvalue1 = viewvaluekey.value.ToString();
             if (viewvalue1 == "0"){              
                     a0Panel.style.display = "block";                    
                     a1Panel.style.display = "none";
                     a2Panel.style.display = "none";
                     a3Panel.style.display = "none";}
                     else
               if (viewvalue1 == "1"){
                     a0Panel.style.display = "none";                    
                     a1Panel.style.display = "block";
                     a2Panel.style.display = "none";
                     a3Panel.style.display = "none";}
                     else
                if (viewvalue1 == "2")
                     a0Panel.style.display = "none";                    
                     a1Panel.style.display = "none";
                     a2Panel.style.display = "block";
                      a3Panel.style.display = "none";
                      else
            if (viewvalue1 == "3")
                     a0Panel.style.display = "none";                    
                     a1Panel.style.display = "none";
                     a2Panel.style.display = "block";
                     a3Panel.style.display = "none";
            }
            
      
            function buttonchanger0() { //button should show panel1
            var viewvaluekey0 = document.getElementById("viewidvalidator");
            viewvaluekey0.value = "1";
            doChanger();
            }

            function buttonchanger1() { //button should show panel2
            var viewvaluekey5 = document.getElementById("viewidvalidator");
            viewvaluekey5.value = "1";
            doChanger();
            }

            function buttonchanger2() {  //button should show panel3
            var viewvaluekey2 = document.getElementById("viewidvalidator");
            viewvaluekey2.value = "2";
            doChanger();
            }

            function buttonchanger3() {  //button should show panel 4
            var viewvaluekey3 = document.getElementById("viewidvalidator");
            viewvaluekey3.value = "3";
            doChanger();
            }
            function buttonchanger4() {       //next button
            var viewvaluekey4 = document.getElementById("viewidvalidator");
            var viewvalueint1 = viewvaluekey4.value.ToInt32();
            var viewvalueint2 = viewvalue1 - 1;
            var viewvaluestring1 = viewvalueint2.ToString();
            viewvaluekey4.value = viewvaluestring1;
            doChanger();
            }
</script>
0
Comment
Question by:preserver3
  • 2
4 Comments
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 200 total points
ID: 12486501
You have no curly braces after the "if" condition.
So is the next "else" out of sequence:

               if (viewvalue1 == "2")
                   a0Panel.style.display = "none";                    
                   a1Panel.style.display = "none";
                   a2Panel.style.display = "block";
                    a3Panel.style.display = "none";
                    else


0
 
LVL 1

Author Comment

by:preserver3
ID: 12486787
sloppy of me, but after I got the brackets back in, it still doesn't seem to work

function doChanger(){
            var a0Panel = document.getElementById('contactpanel');
            var a1Panel = document.getElementById('billingpanel');
            var a2Panel = document.getElementById('categoriespanel');
            var a3Panel = document.getElementById('logosdescriptionspanel');
            var viewvaluekey = document.getElementById('viewidvalidator');
            var viewvalue1 = viewvaluekey.value.ToString();
             if (viewvalue1 == "0"){              
                     a0Panel.style.display = "block";                    
                     a1Panel.style.display = "none";
                     a2Panel.style.display = "none";
                     a3Panel.style.display = "none";}
                     else
               if (viewvalue1 == "1"){
                     a0Panel.style.display = "none";                    
                     a1Panel.style.display = "block";
                     a2Panel.style.display = "none";
                     a3Panel.style.display = "none";}
                     else
                if (viewvalue1 == "2"){
                     a0Panel.style.display = "none";                    
                     a1Panel.style.display = "none";
                     a2Panel.style.display = "block";
                      a3Panel.style.display = "none";}
                      else
            if (viewvalue1 == "3"){
                     a0Panel.style.display = "none";                    
                     a1Panel.style.display = "none";
                     a2Panel.style.display = "block";
                     a3Panel.style.display = "none";}
            }
            
      
            function buttonchanger0() {
            var viewvaluekey0 = document.getElementById("viewidvalidator");
            viewvaluekey0.value = "1";
            doChanger();
            }

            function buttonchanger1() {
            var viewvaluekey5 = document.getElementById("viewidvalidator");
            viewvaluekey5.value = "1";
            doChanger();
            }

            function buttonchanger2() {
            var viewvaluekey2 = document.getElementById("viewidvalidator");
            viewvaluekey2.value = "2";
            doChanger();
            }

            function buttonchanger3() {
            var viewvaluekey3 = document.getElementById("viewidvalidator");
            viewvaluekey3.value = "3";
            doChanger();
            }
            function buttonchanger4() {
            var viewvaluekey4 = document.getElementById("viewidvalidator");
            var viewvalueint1 = viewvaluekey4.value.ToInt32();
            var viewvalueint2 = viewvalue1 - 1;
            var viewvaluestring1 = viewvalueint2.ToString();
            viewvaluekey4.value = viewvaluestring1;
            doChanger();
            }
0
 
LVL 19

Accepted Solution

by:
dakyd earned 1800 total points
ID: 12487095
this line is wrong:
  var viewvalue1 = viewvaluekey.value.ToString();

the method should be toString() (lowercase "t").  Change it to this:
  var viewvalue1 = viewvaluekey.value.toString();

Also, don't know if it's intentional or not, but you display the same element for both viewvalue1 == "2" and viewvalue1 == "3".  Shouldn't you show a3Panel for a viewvalue1 == "3"?

Hope that helps.
0
 
LVL 1

Author Comment

by:preserver3
ID: 12487177
thank you both, I was just apparently sloppy....
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question