My javascript function doesn't seem to be working. I can't figure out why
Question
My function doesn't seem to be executing correctly. What is wrong? I have already spent 5 hours trying to get this dang function to work. eventually I am going to put links on the photos.
<html>
<head>
<script type="text/javascript">
var pagenumber=1;
function increase()
{
if(pagenumber == 1)
{
return
}
pagenumber++;
}
function decrease()
{
if(pagenumber == 5)
{
return
}
pagenumber--;
}
function slider() {
if(pagenumber == 1)
{
document.getElementById('pg1').style.display='inline';
document.getElementById('pg2').style.display='none';
document.getElementById('down').style.cursor='not-allowed';
document.getElementById('down').style.background-position='top';
}
if(pagenumber == 2)
{
document.getElementById('pg1').style.display='h';
document.getElementById('pg3').style.display='none';
document.getElementById('pg2').style.display='inline';
document.getElementById('down').style.cursor='pointer';
document.getElementById('down').style.background-position='bottom';
}
if(pagenumber == 3)
{
document.getElementById('pg2').style.display='none';
document.getElementById('pg4').style.display='none';
document.getElementById('pg3').style.display='inline';
}
if(pagenumber == 4)
{
document.getElementById('pg3').style.display='none';
document.getElementById('pg5').style.display='none';
document.getElementById('pg4').style.display='inline';
document.getElementById('down').style.cursor='pointer';
document.getElementById('up').style.background-position='top';
}
if(pagenumber == 5)
{
document.getElementById('pg4').style.display='none';
document.getElementById('pg5').style.display='inline';
document.getElementById('up').style.cursor='not-allowed';
document.getElementById('up').style.background-position='bottom';
}
}
</script>
</head>
<body height="183px" bgcolor="#F3F3F3" style="width:279px">
<div id="down" style="float:left;margin-top:29px;height:27px;width:15px;display:block;cursor:pointer;background:url('website/arrow_left.png') no-repeat top left;background-repeat:no-repeat;background-position:top">
<img src="website/pixel.png" width="15px" height="30px" onclick="decrease()" onclick="slider()">
</div>
<div id="up" style="float:right;margin-top:29px;height:27px;width:15px;display:block;cursor:pointer;background:url('website/arrow_right.png') no-repeat top left;background-repeat:no-repeat;background-position:top">
<img src="website/pixel.png" width="15px" height="30px" onclick="increase()" onclick="slider()">
</div>
<table style="background:url('website/arrow_middle.png') no-repeat center" align="center">
<tr id="pg1" style="display:inline">
<td style="padding-left:25px; padding-right:25px">
<a href="google.com">
<img src="website/oil.jpg" width="75px" height="75px">
</a>
</td>
<td style="padding-right:25px">
<a href="amazon.com">
<img src="website/gas.jpg" width="75px" height="75px">
</a>
</td>
</tr>
<tr id="pg2" style="display:none">
<td style="padding-left:25px; padding-right:25px">
<a href="google.com">
<img src="website/nuclear.jpg" width="75px" height="75px">
</a>
</td>
<td style="padding-right:25px">
<a href="amazon.com">
<img src="website/solar.jpg" width="75px" height="75px">
</a>
</td>
</tr>
<tr id="pg3" style="display:none">
<td style="padding-left:25px; padding-right:25px">
<a href="google.com">
<img src="website/wind.jpg" width="75px" height="75px">
</a>
</td>
<td style="padding-right:25px">
<a href="amazon.com">
<img src="website/hydro.jpg" width="75px" height="75px">
</a>
</td>
</tr>
<tr id="pg4" style="display:none">
<td style="padding-left:25px; padding-right:25px">
<a href="google.com">
<img src="website/electric.jpg" width="75px" height="75px">
</a>
</td>
<td style="padding-right:25px">
<a href="amazon.com">
<img src="website/thermal.jpg" width="75px" height="75px">
</a>
</td>
</tr>
<tr id="pg5" style="display:none">
<td style="padding-left:25px; padding-right:25px">
<a href="google.com">
<img src="website/mining.jpg" width="75px" height="75px">
</a>
</td>
<td style="padding-right:25px">
<a href="amazon.com">
<img src="website/transversal.jpg" width="75px" height="75px">
</a>
</td>
</tr>
</table>
</body>
</html>
3 answers
solution1
2 2013-09-01 05:23:56
The dollar sign for variables is only used in languages such as PHP. On line 7 take out the dollar sign when you compare the variable in the if and you should be good to go.
if($pagenumber == 1)
to
if(pagenumber == 1)
UPDATE 1:
Also, your elements have 2 different onclick attributes set. If you do want an onclick to call 2 functions try this:
<img src="website/pixel.png" width="15px" height="30px" onclick="increase();slider()">
UPDATE 2:
To change the background-position CSS attribute through JavaScript, the property is called backgorundPosition . So try this:
document.getElementById('down').style.backgroundPosition = 'bottom';
solution2
1 2013-09-01 05:21:59
Problem 1:
This line is the problem:
if($pagenumber == 1)
change this line to:
if(pagenumber == 1)
As your variable name is pagenumber here:
var pagenumber=1;
Problem 2:
You return immediately after checking pagenumber == 1 and that's why it never increments. Change your code to:
if(pagenumber == 1)
return ++pagenumber;
If you don't want to return value from function then:
function increase() {
if(pagenumber == 1)
pagenumber++;
}
Also make sure to have only one onclick event handler in your HTML code.
solution3
0 2013-09-01 05:29:21
Got it working: http://jsfiddle.net/xGWp3/1/
Problem 1
$pagenumber must be pagenumber
Problem 2
pagenumber can never increase; if it's 1 , which it starts out at, the increase() function returns before it can be incremented.
Try rewriting increase() and decrease() like so:
function increase()
{
if (pagenumber < 5)
{
pagenumber++;
}
}
function decrease()
{
if (pagenumber > 1)
{
pagenumber--;
}
}
Problem 3
You may also need to change your onclick attributes to be of the form onclick="increase(); slider()" ; I don't think you can have two onclick attributes on a single HTML tag.
Problem 4
Your functions aren't in the global scope as declared; try declaring them like this:
increase = function ()
{
//...
}
Problem 5
document.getElementById('pg1').style.display='h';
should be
document.getElementById('pg1').style.display='none';
With all of these addressed, the code appears to work: http://jsfiddle.net/xGWp3/1/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.