Switch Statement javascript with orderlist [Done]

Josh
Part of the Furniture

Apple iManiac / eBay Addict

Posts: 12,347

Switch Statement javascript with orderlist [Done] Mar 10, 2010 20:52:39 GMT -8

Post by Josh on Mar 10, 2010 20:52:39 GMT -8

I am having problems figuring out how to use the swtich statement correct to display a certain order list that is selected...Here is what I have so far...

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Lab5.7</title>
</head>
<body>
<form id="form1" runat="server">
<div>

<ol type="1", id="Numbered">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<ol type="A", id="Lettered">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<ul id="Bullet">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<script language="JavaScript" type="text/javascript">
var answer = prompt("Select a list style: \n 1(Numbered) 2(Lettered) 3(Bullet)" , "");

switch(answer){
case 1: document.getElementById("Bullet");
case 2: document.getElementById("Lettered");
case 3: document.getElementById("Numbered");
default:
alert("Please enter a number 1 -3");
}
</script>

</div>
</form>
</body>
</html>

Thanks so much

Last Edit: Mar 10, 2010 21:35:51 GMT -8 by Josh

4 8 15 16 23 42

Bob
v6 Beta Tester

Posts: 2,623

Switch Statement javascript with orderlist [Done] Mar 10, 2010 21:17:19 GMT -8

Post by Bob on Mar 10, 2010 21:17:19 GMT -8

Mar 10, 2010 20:52:39 GMT -8 Josh said:

I am having problems figuring out how to use the swtich statement correct to display a certain order list that is selected...Here is what I have so far...

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="www.w3.org/1999/xhtml">
<head runat="server">
<title>Lab5.7</title>
</head>
<body>
<form id="form1" runat="server">
<div>

<ol type="1", id="Numbered">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<ol type="A", id="Lettered">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<ul id="Bullet">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>

<script language="JavaScript" type="text/javascript">
var answer = prompt("Select a list style: \n 1(Numbered) 2(Lettered) 3(Bullet)" , "");

switch(answer){
case 1: document.getElementById("Bullet");
case 2: document.getElementById("Lettered");
case 3: document.getElementById("Numbered");
default:
alert("Please enter a number 1 -3");
}
</script>

</div>
</form>
</body>
</html>

Thanks so much

So we're back to the same thing I pointed out you in the last thread. The prompt () method returns a string. You're trying to compare integers. Apples and oranges. Use the parseInt () method (passing the answer variable through it) to convert the string to an integer. Oranges and oranges (or apples, whichever you prefer).

Next is proper usage of cases within a switch statement. All cases except for the default need to end with a break statement.

Also, you're only wanting to only show one of the three lists, correct? If so I'd put "display: none" attributes on all of them and in the cases do getElementById ()style.display = "".

<ol type="1" id="Numbered" style="display: none">
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ol>

<ol type="A" id="Lettered" style="display: none">
  <li>List item 1b</li>
  <li>List item 2b</li>
  <li>List item 3b</li>
</ol>

<ul id="Bullet" style="display: none">
  <li>List item 1c</li>
  <li>List item 2c</li>
  <li>List item 3c</li>
</ul>

<script type="text/javascript">

var answer = prompt ("Select a list style: \n 1(Numbered) 2(Lettered) 3(Bullet)" , "");

switch (parseInt (answer))
{
  case 1:
    document.getElementById ("Bullet").style.display = "";
    break;
    
  case 2:
    document.getElementById ("Lettered").style.display = "";
    break;
    
  case 3:
    document.getElementById ("Numbered").style.display = "";
    break;

  default:
    alert ("Please enter a number 1 - 3");
}

</script>

Last Edit: Mar 10, 2010 21:18:02 GMT -8 by Bob

Josh Part of the Furniture Apple iManiac / eBay Addict Posts: 12,347 Josh inherit Male 27278 0 Aug 3, 2024 9:13:18 GMT -8 Josh Apple iManiac / eBay Addict 12,347 Part of the Furniture July 2004 jwd41190	Switch Statement javascript with orderlist [Done] Mar 10, 2010 21:35:31 GMT -8 Select Post Deselect Post Link to Post Member Give Gift Back to Top Post by Josh on Mar 10, 2010 21:35:31 GMT -8 Thanks so much it works great. I am learning more and more as I go...I feel like I'm improving a lot thanks to ya'lls help too. Thanks again!
	4 8 15 16 23 42

Charles Stover
v5 Beta Tester

Posts: 1,731

Switch Statement javascript with orderlist [Done] Mar 11, 2010 16:09:35 GMT -8

Post by Charles Stover on Mar 11, 2010 16:09:35 GMT -8

Is type a valid ol/ul attribute? I think you're supposed to use CSS's list-style-type attribute, but that may be too ahead of the game.

You really wouldn't even need switch() for this.
Going with what Bobby gave you,

// start off with no sort selected
// give a list of sort IDs
var sort = 0, sorts = ["Numbered", "Lettered", "Bullet"];

// until a sort is given and that sort is valid (1 through however many IDs there are)
while (!sort || sort > sorts.length)
{
// ask for the sort and convert it to integer
sort = parseInt(prompt("Select a list style:\n1) Numbered\n2) Lettered\n3) Bullet", "1"));
}

// now that a sort is given and it's valid
// get the corresponding ID
// and display it
document.getElementById(sorts[sort - 1]).style.display = "block";

Switch Statement javascript with orderlist [Done]

Post by Josh on Mar 10, 2010 20:52:39 GMT -8

Post by Bob on Mar 10, 2010 21:17:19 GMT -8

Post by Josh on Mar 10, 2010 21:35:31 GMT -8

Post by Charles Stover on Mar 11, 2010 16:09:35 GMT -8