我的javascript函数似乎无法正常工作。 我不知道为什么
[英]My javascript function doesn't seem to be working. I can't figure out why
问题描述
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. 我已经花了5个小时尝试使此dang函数正常工作。 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 个解决方案
解决方案1
2 2013-09-01 05:23:56
The dollar sign for variables is only used in languages such as PHP. 变量的美元符号仅在PHP之类的语言中使用。 On line 7 take out the dollar sign when you compare the variable in the if and you should be good to go. 在第7行上，当您比较if中的变量时，请取出美元符号，您应该可以使用。
if($pagenumber == 1)
to 至
if(pagenumber == 1)
UPDATE 1: 更新1：
Also, your elements have 2 different onclick attributes set. 另外，您的元素具有2个不同的onclick属性集。 If you do want an onclick to call 2 functions try this: 如果您确实希望onclick调用2个函数，请尝试以下操作：
<img src="website/pixel.png" width="15px" height="30px" onclick="increase();slider()">
UPDATE 2: 更新2：
To change the background-position CSS attribute through JavaScript, the property is called backgorundPosition . 要通过JavaScript更改background-position CSS属性，该属性称为backgorundPosition 。 So try this: 所以试试这个：
document.getElementById('down').style.backgroundPosition = 'bottom';
解决方案2
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: 由于您的变量名称是此处的pagenumber ：
var pagenumber=1;
Problem 2: 问题2：
You return immediately after checking pagenumber == 1 and that's why it never increments. 您在检查pagenumber == 1后立即返回，这就是为什么它永远不会增加的原因。 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. 还要确保HTML代码中只有一个onclick事件处理程序。
解决方案3
0 2013-09-01 05:29:21
Got it working: http://jsfiddle.net/xGWp3/1/ 正常工作： http : //jsfiddle.net/xGWp3/1/
Problem 1 问题1
$pagenumber must be pagenumber $pagenumber必须是pagenumber
Problem 2 问题2
pagenumber can never increase; pagenumber永远不会增加； if it's 1 , which it starts out at, the increase() function returns before it can be incremented. 如果它是1 ，它开始于该位置，则increase()函数将在其递增之前返回。
Try rewriting increase() and decrease() like so: 尝试像这样重写crement increase()和decrease() ：
function increase()
{
if (pagenumber < 5)
{
pagenumber++;
}
}
function decrease()
{
if (pagenumber > 1)
{
pagenumber--;
}
}
Problem 3 问题3
You may also need to change your onclick attributes to be of the form onclick="increase(); slider()" ; 您可能还需要将onclick属性更改为onclick="increase(); slider()" ； I don't think you can have two onclick attributes on a single HTML tag. 我认为您不能在单个HTML标签上具有两个onclick属性。
Problem 4 问题4
Your functions aren't in the global scope as declared; 您的函数不在声明的全局范围内； try declaring them like this: 尝试这样声明它们：
increase = function ()
{
//...
}
Problem 5 问题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/ 解决了所有这些问题后，该代码似乎可以正常工作： http : //jsfiddle.net/xGWp3/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.