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
<implicit_p><input type=button value="zoom in" onClick="zoom_in()"><input
type=button value="zoom out" onclick="zoom_out()">
<select onChange="SelectChange(thi
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.
<!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
<implicit_p><input type=button value="zoom in" onClick="zoom_in()"><input
type=button value="zoom out" onclick="zoom_out()">
<select onChange="SelectChange(thi
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.
Last Comment
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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;
}
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;
}
ASKER
I already tried that. been trying other things as well. nothing so far.
ASKER
Tried this but nothing happens.
function SelectChange()
{
var ThisWidth = "467";
var ThisHeight = "350";
var z = document.images.zoom;
var e = document.getElementById("c
var strUser = e.options[e.selectedIndex]
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;
}
}
function SelectChange()
{
var ThisWidth = "467";
var ThisHeight = "350";
var z = document.images.zoom;
var e = document.getElementById("c
var strUser = e.options[e.selectedIndex]
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;
}
}
Works fine in Chrome. What browser are you looking at?
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>
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("s
var strUser = e.options[e.selectedIndex]
//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>
function SelectChange()
{
var ThisWidth = 467;
var ThisHeight = 350;
var z = document.images.zoom;
var e = document.getElementById("s
var strUser = e.options[e.selectedIndex]
//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>
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("s
var strUser = e.options[e.selectedIndex]
var e = document.getElementById("s
var strUser = e.options[e.selectedIndex]
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.
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.
ASKER
This got me started. Couldn't move forward without it.
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.
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">
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">
ASKER
Appreciate the Help.
JavaScript
JavaScript is a dynamic, object-based language commonly used for client-side scripting in web browsers. Recently, server side JavaScript frameworks have also emerged. JavaScript runs on nearly every operating system and in almost every mainstream web browser.
127K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER