Avatar of MadIce
MadIce
 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.
JavaScriptHTML

Avatar of undefined
Last Comment
MadIce

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Tom Beck

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
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.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
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

Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
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.
I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
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">
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
MadIce

ASKER
Appreciate the Help.