asked on

Javascript function/switch case issue

Can someone explain what is wrong with the code below? If I take out the SelectChange function, the zoom in and out functions work as wanted. Can't get the dropdown to work with the SelectChange function. get an "expecting a }" error on the line switch(optValue)

<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN">
<html><head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<title>WorkingZoom</title>

<script>function zoom_in()
{
var z = document.images.zoom
z.height= parseInt(z.height*2)
z.width= parseInt(z.width*2)

}
function zoom_out()
{
var z = document.images.zoom
z.height= parseInt(z.height/2)
z.width= parseInt(z.width/2)
}

function SelectChange(optValue)
{
      var ThisWidth = "467";
      var ThisHeight = "350";
      var z = document.images.zoom

      switch(optValue)
      {
      Case 1:

      z.Width= parseInt(ThisWidth*1)
      z.Height= parseInt(ThisHeight*1)
      break;

      Case 2:
      z.Width= parseInt(ThisWidth*1.25)
      z.Height= parseInt(ThisHeight*1.25)
      break;

      Case 3:
      z.Width= parseInt(ThisWidth*1.5)
      z.Height= parseInt(ThisHeight*1.5)
      break;

      }
}
</script>

</head>
<body style="margin: 0;">
<form name=mySelect enctype="application/x-www-form-urlencoded">
<implicit_p><input type=button value="zoom in" onClick="zoom_in()"><input
type=button value="zoom out" onclick="zoom_out()">
<select onChange="SelectChange(this.value)"
name=cmbSelect size=1>
<option value=1>Normal</option>
<option VALUE=2>125%</option>
<option VALUE=3>150%</option>
<option VALUE=4>175%</option>
<option VALUE=5>200%</option>
<option VALUE=6>250%</option>
<option VALUE=7>300%</option>
<option VALUE=8>400%</option>
</select>
</form>
<div>
<implicit_p><img name=zoom src="image1.jpg"
width=467 height=350 border=0>
</div>
</body>
</html>

FYI, I am not a javascript programmer.

ASKER CERTIFIED SOLUTION

Tom Beck

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

MadIce

ASKER

Well, that got rid of the error but when I select from the dropdown, nothing changes. any idea what's wrong with the code?

Tom Beck

optValue is a string, not an integer so your cases must look for string values.

switch(optValue)
{
case "1":
z.width= parseInt(ThisWidth*1);
z.height= parseInt(ThisHeight*1);
break;

case "2":
z.width= parseInt(ThisWidth*1.25);
z.height= parseInt(ThisHeight*1.25);
break;

case "3":
z.width= parseInt(ThisWidth*1.5);
z.height= parseInt(ThisHeight*1.5);
break;

}

MadIce

ASKER

I already tried that. been trying other things as well. nothing so far.

MadIce

ASKER

Tried this but nothing happens.

function SelectChange()
{
      var ThisWidth = "467";
      var ThisHeight = "350";
      var z = document.images.zoom;
      var e = document.getElementById("cmbSelect");
      var strUser = e.options[e.selectedIndex].value;

      switch(strUser)
      {
      case "1":
      z.Width= ThisWidth*1;
      z.Height= ThisHeight*1;
      break;

      case "2":
      z.Width= ThisWidth*1.25;
      z.Height= ThisHeight*1.25;
      break;

      case "3":
      z.Width= ThisWidth*1.5;
      z.Height= ThisHeight*1.5;
      break;

      }
}

Tom Beck

Works fine in Chrome. What browser are you looking at?

Tom Beck

Works in Firefox and IE as well. Here's my complete test if it helps. I'm using a different image of course.

<!doctype HTML public "-//W3C//DTD HTML 4.0 Frameset//EN">
<html><head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<title>WorkingZoom</title>

<script>
function zoom_in()
{
var z = document.images.zoom
z.height= parseInt(z.height*2)
z.width= parseInt(z.width*2)

}
function zoom_out()
{
var z = document.images.zoom
z.height= parseInt(z.height/2)
z.width= parseInt(z.width/2)
}

function SelectChange(optValue) 
{
      var ThisWidth = "467";
      var ThisHeight = "350";
      var z = document.images.zoom;

      switch(optValue)
      {
      case "1":
      z.width= parseInt(ThisWidth*1);
      z.height= parseInt(ThisHeight*1);
      break;
      
      case "2":
      z.width= parseInt(ThisWidth*1.25);
      z.height= parseInt(ThisHeight*1.25);
      break;

      case "3":
      z.width= parseInt(ThisWidth*1.5);
      z.height= parseInt(ThisHeight*1.5);
      break;
      
      }
}
</script>

</head>
<body style="margin: 0;">
<form name=mySelect enctype="application/x-www-form-urlencoded">
<implicit_p><input type=button value="zoom in" onClick="zoom_in()"><input 
 type=button value="zoom out" onclick="zoom_out()">
<select onChange="SelectChange(this.value)" 
 name=cmbSelect size=1>
<option value=1>Normal</option>
<option VALUE=2>125%</option>
<option VALUE=3>150%</option>
<option VALUE=4>175%</option>
<option VALUE=5>200%</option>
<option VALUE=6>250%</option>
<option VALUE=7>300%</option>
<option VALUE=8>400%</option>
</select>
</form>
<div>
<implicit_p><img name=zoom src="images/BlueFish_2.jpg" 
 width=467 height=350 border=0> 
</div>
</body>
</html>

Open in new window

MadIce

ASKER

Oh yea. Should of mentioned that. Will only be used in IE. Currently 8. but looks like i fixed it. here is what is working. made mutiple changes so not sure if all was needed but the last was using parseInt.

function SelectChange()
{
      var ThisWidth = 467;
      var ThisHeight = 350;
      var z = document.images.zoom;
      var e = document.getElementById("select1");
      var strUser = e.options[e.selectedIndex].value;
//z.height= parseInt(z.height*2);
//z.width= parseInt(z.width*2);

      switch(strUser)
      {
      case "1":
      z.height= parseInt(ThisHeight*1.0);
      z.width= parseInt(ThisWidth*1.0);
      break;

      case "2":
      z.height= parseInt(ThisHeight*1.25);
      z.width= parseInt(ThisWidth*1.25);
      break;

      case "3":
      z.height= parseInt(ThisHeight*1.5);
      z.width= parseInt(ThisWidth*1.5);
      break;

      case "4":
      z.height= parseInt(ThisHeight*1.75);
      z.width= parseInt(ThisWidth*1.75);
      break;

      case "5":
      z.height= parseInt(ThisHeight*2);
      z.width= parseInt(ThisWidth*2);
      break;

      case "6":
      z.height= parseInt(ThisHeight*2.5);
      z.width= parseInt(ThisWidth*2.5);
      break;

      case "7":
      z.height= parseInt(ThisHeight*3);
      z.width= parseInt(ThisWidth*3);
      break;

      case "8":
      z.height= parseInt(ThisHeight*4);
      z.width= parseInt(ThisWidth*4);
      break;


      }
}</script>

Tom Beck

My simpler optValue version worked fine in IE8. I don't understand why you would remove parseInt from your original posted code. That was necessary. This is not:

var e = document.getElementById("select1");
var strUser = e.options[e.selectedIndex].value;

MadIce

ASKER

just saw your example. When selecting from dropdown, doesn't always work. Sometimes, not always. seems strange. But the changes I made seems to work. Only issue I have now is I'm using Robohelp and Adobe likes to add this code to my image
style="width: 467px; height: 350px; border-style: none;"

this will also cause the zoom in and out not to work. Not sure how to prevent this.

MadIce

ASKER

This got me started. Couldn't move forward without it.

MadIce

ASKER

Made changes to see what would work. Think I know what I did wrong. Your reults will work for me. Will get rid of those lines you mentioned.

Tom Beck

Thanks for the points.

I have no experience with RoboHelp but adding style="width: 467px; height: 350px; border-style: none;" to the image does break the dropdown. Doubt it will make a difference, but all your html attributes should be in quotes for compliance sake.

<img name="zoom" src="image1.jpg"
width="467" height="350" border="0">

MadIce

ASKER

Appreciate the Help.