用于动态更改图像的Javascript代码可在IE，FF，Chrome等中正常运行：(
[英]Javascript code to dynamically change image works in IE not FF, Chrome etc :(
问题描述
Usually I hear about code working under things apart from IE but Ive got the opposite problem. 
通常，我听说有关代码在IE之外的情况下工作的情况，但我遇到了相反的问题。
Here's the link : 这是链接：
http://www.underagedriving.co.uk/ins/timeclick2.php http://www.underagedriving.co.uk/ins/timeclick2.php
And a snapshot of the code that doesnt kick any errors under IE but wont play ball with anything else (Opera, iPhone Safari, Chrome, FF) 并且该代码的快照不会在IE下引发任何错误，但不会与其他任何代码（Opera，iPhone Safari，Chrome，FF）打交道
I know its going to be something daft but having worked on this all day (Im not a proper coder) when it wasnt playing ball my eyes kinda glazed over . 我知道它会有些愚蠢，但是整天都在工作（我不是一个合适的编码人员），当时它并没有打球，我的眼睛有点发呆。
Any help appreciated pointing me in the right direction :) 任何帮助表示赞赏，以正确的方向指出我:)
Thanks, Rik 谢谢，瑞克
<html>
<head>
<script type="text/javascript">
var arr = new Array(); // Create our array
var convexisting = " "; // Create a blank variable we check later
if (!Array.prototype.indexOf) // IE8 and below
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length >>> 0;
var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;
for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
function toggleimg(itemname)
{
if (document.getElementById(itemname).src == 'http://www.underagedriving.co.uk/ins/yellow.gif') // If its yellow that means its not set
{
document.getElementById(itemname).src = 'http://www.underagedriving.co.uk/ins/blue.gif'; // Change colour to blue
arr.push(itemname); // Add item to array
}
else
{
document.getElementById(itemname).src = 'http://www.underagedriving.co.uk/ins/yellow.gif'; // If its already blue, deselect it by turning yellow
arr.splice(arr.indexOf(itemname), 1); // Remove it from array
}
}
function checkform(form) // On submit fix the array to send to PHP
{
form.availabilityarray.value = arr.join(","); // Concat our array data in a CSV string to submit via the form
return true ; // Allow submitting of the form data
}
function preprocess() // Has to be a function after body load
{
// If array ready to be processed
if (convexisting != " ") // Check our test var is not blank
{
var arr = convexisting.split(","); // Split our CSV data for the grid back into an array
for (var i = 0; i < arr.length; i++) toggleimg(arr[i]); // For each entry in array run toggleimg
}
}
</script>
<body onload="javascript:preprocess();">
<form name="claimform" method="POST" action="http://www.underagedriving.co.uk/ins/timeclick2.php" enctype="multipart/form-data" onsubmit="return checkform(this);">
<table width="700" cellspacing=0 cellpadding=0 border=0>
<tr>
<td width="200"> </td><td width="500"><img src='hours.gif' border=0></td>
</tr>
<tr><td align='right'> Fri 07/10/2011 </td><td><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col00');"><img src='yellow.gif' name='20111007row05col00' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col01');"><img src='yellow.gif' name='20111007row05col01' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col02');"><img src='yellow.gif' name='20111007row05col02' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col03');"><img src='yellow.gif' name='20111007row05col03' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col04');"><img src='yellow.gif' name='20111007row05col04' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col05');"><img src='yellow.gif' name='20111007row05col05' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col06');"><img src='yellow.gif' name='20111007row05col06' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col07');"><img src='yellow.gif' name='20111007row05col07' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col08');"><img src='yellow.gif' name='20111007row05col08' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col09');"><img src='yellow.gif' name='20111007row05col09' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col10');"><img src='yellow.gif' name='20111007row05col10' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col11');"><img src='yellow.gif' name='20111007row05col11' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col12');"><img src='yellow.gif' name='20111007row05col12' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col13');"><img src='yellow.gif' name='20111007row05col13' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col14');"><img src='yellow.gif' name='20111007row05col14' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col15');"><img src='yellow.gif' name='20111007row05col15' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col16');"><img src='yellow.gif' name='20111007row05col16' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col17');"><img src='yellow.gif' name='20111007row05col17' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col18');"><img src='yellow.gif' name='20111007row05col18' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col19');"><img src='yellow.gif' name='20111007row05col19' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col20');"><img src='yellow.gif' name='20111007row05col20' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col21');"><img src='yellow.gif' name='20111007row05col21' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col22');"><img src='yellow.gif' name='20111007row05col22' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111007row05col23');"><img src='yellow.gif' name='20111007row05col23' border=0></a></td></tr>
<tr><td align='right'> Sat 08/10/2011 </td><td><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col00');"><img src='yellow.gif' name='20111008row06col00' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col01');"><img src='yellow.gif' name='20111008row06col01' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col02');"><img src='yellow.gif' name='20111008row06col02' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col03');"><img src='yellow.gif' name='20111008row06col03' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col04');"><img src='yellow.gif' name='20111008row06col04' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col05');"><img src='yellow.gif' name='20111008row06col05' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col06');"><img src='yellow.gif' name='20111008row06col06' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col07');"><img src='yellow.gif' name='20111008row06col07' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col08');"><img src='yellow.gif' name='20111008row06col08' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col09');"><img src='yellow.gif' name='20111008row06col09' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col10');"><img src='yellow.gif' name='20111008row06col10' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col11');"><img src='yellow.gif' name='20111008row06col11' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col12');"><img src='yellow.gif' name='20111008row06col12' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col13');"><img src='yellow.gif' name='20111008row06col13' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col14');"><img src='yellow.gif' name='20111008row06col14' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col15');"><img src='yellow.gif' name='20111008row06col15' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col16');"><img src='yellow.gif' name='20111008row06col16' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col17');"><img src='yellow.gif' name='20111008row06col17' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col18');"><img src='yellow.gif' name='20111008row06col18' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col19');"><img src='yellow.gif' name='20111008row06col19' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col20');"><img src='yellow.gif' name='20111008row06col20' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col21');"><img src='yellow.gif' name='20111008row06col21' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col22');"><img src='yellow.gif' name='20111008row06col22' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111008row06col23');"><img src='yellow.gif' name='20111008row06col23' border=0></a></td></tr>
<tr><td align='right'> Sun 09/10/2011 </td><td><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col00');"><img src='yellow.gif' name='20111009row07col00' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col01');"><img src='yellow.gif' name='20111009row07col01' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col02');"><img src='yellow.gif' name='20111009row07col02' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col03');"><img src='yellow.gif' name='20111009row07col03' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col04');"><img src='yellow.gif' name='20111009row07col04' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col05');"><img src='yellow.gif' name='20111009row07col05' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col06');"><img src='yellow.gif' name='20111009row07col06' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col07');"><img src='yellow.gif' name='20111009row07col07' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col08');"><img src='yellow.gif' name='20111009row07col08' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col09');"><img src='yellow.gif' name='20111009row07col09' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col10');"><img src='yellow.gif' name='20111009row07col10' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col11');"><img src='yellow.gif' name='20111009row07col11' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col12');"><img src='yellow.gif' name='20111009row07col12' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col13');"><img src='yellow.gif' name='20111009row07col13' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col14');"><img src='yellow.gif' name='20111009row07col14' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col15');"><img src='yellow.gif' name='20111009row07col15' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col16');"><img src='yellow.gif' name='20111009row07col16' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col17');"><img src='yellow.gif' name='20111009row07col17' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col18');"><img src='yellow.gif' name='20111009row07col18' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col19');"><img src='yellow.gif' name='20111009row07col19' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col20');"><img src='yellow.gif' name='20111009row07col20' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col21');"><img src='yellow.gif' name='20111009row07col21' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col22');"><img src='yellow.gif' name='20111009row07col22' border=0></a><a href="javascript:void(0)" onclick="javascript:toggleimg('20111009row07col23');"><img src='yellow.gif' name='20111009row07col23' border=0></a></td></tr>
<tr><td> <hr </td></tr>
</table>
<input type="hidden" name="availabilityarray" value="">
<input type="submit" value="Submit Hours">
</form>
</body>
</html>
2 个解决方案
解决方案1
5 已采纳 2011-09-15 23:18:39
The name= attribute is meaningless on the <img> tags. 在<img>标记上， name=属性毫无意义。 If what you actually want is an id, then set the id= explicitly. 如果您真正想要的是一个ID，请显式设置id= 。
You may want to familiarize yourself with the jQuery JS library. 您可能需要熟悉jQuery JS库。 It makes a lot of tasks like this much easier. 它使许多这样的任务变得更加容易。
解决方案2
1 2011-09-16 00:32:25
Your problem is that you are using the value of the name attribute but using it with getElementById , which works on the id attribute. 您的问题是您使用的是name属性的值，但将其与对id属性起作用的getElementById一起使用。 Since each name attribute value is unique, you can just change them to id attributes and the code should work. 由于每个名称属性值都是唯一的，因此您只需将它们更改为id属性，代码就可以工作。 Or you can change the call to getElementById to getElementsByName . 或者，您可以将对getElementById的调用更改为getElementsByName 。
Since getElementsByName returns a collection, if you adopt that approach you'll need to select the first member of the returned collection, something like: 由于getElementsByName返回一个集合，因此，如果采用这种方法，则需要选择返回的集合的第一个成员，例如：
if (document.getElementsByName(itemname)[0].src ...)
But to be robust, you would need: 但是要保持健壮，您需要：
var el = document.getElementsByName(itemname)[0];
if (el && el.src == ...) {
...
}
A similar approach should be adopted with the call to getElementById . 对getElementById的调用应采用类似的方法。
The code using getElementById works in IE (and some browsers that mimic its behaviour) because it has always confused name and id attributes, treating them essentially as the same thing. 使用getElementById的代码可在IE（和某些模仿其行为的浏览器）中使用，因为它始终混淆名称和ID属性，本质上将它们视为同一事物。 It doesn't work in standards compliant browsers, and probably won't work in IE 9 in standards mode. 它不适用于符合标准的浏览器，并且可能无法在IE 9的标准模式下运行。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript在Chrome上有效，但在IE或FF上无效 - Javascript works on Chrome, but no on IE or FF
JavaScript适用于IE + Chrome，但不适用于FF - JavaScript works in IE + Chrome but not FF
JavaScript无法在IE 11中使用，但可以在Chrome和FF上使用 - Javascript not working in IE 11, but works on Chrome and FF
Javascript适用于FF / IE，但不适用于Chrome / Safari - Javascript works in FF / IE but not Chrome / Safari
JS / jQuery代码适用于Chrome，但不适用于IE / FF - JS/jQuery code works in chrome but not IE/FF
javascript在已部署的IE和VS调试器，ff，chrome等中的工作方式不同 - javascript works differently in deployed IE vs VS debugger, ff, chrome etc
Javascript无法在Chrome中使用？ 但在FF和IE作品中 - Javascript not working in Chrome?? but in FF and IE works
JavaScript浏览器问题在FF中有效，但在IE和Chrome中无效 - javascript browser problem works in FF but not in IE and Chrome
Javascript单选按钮在FF和Chrome中有效，但在IE中不起作用 - Javascript radiobutton works in FF and Chrome but not in IE
我的 Javascript 适用于 IE FF 和 Safari，但不适用于 Chrome - My Javascript works on IE FF & Safari, but not Chrome
相关标签