Код JavaScript для динамического изменения изображения работает в IE, а не в FF, Chrome и т. Д. :( - PullRequest
Новая
       34

Код JavaScript для динамического изменения изображения работает в IE, а не в FF, Chrome и т. Д. :(

0 голосов
/ 16 сентября 2011

Обычно я слышу о коде, работающем под другими вещами, кроме IE, но у меня возникла противоположная проблема.

Вот ссылка:

http://www.underagedriving.co.uk/ins/timeclick2.php

И снимок кода, который не выдает никаких ошибок под IE, но не играет в мяч с чем-либо еще (Opera, iPhone Safari, Chrome, FF)

Я знаю, что это будет что-то глупое, но, работая над этим весь день (я не являюсь надлежащим программистом), когда он не играл в мяч, мои глаза отчасти застеклились.

Любая помощь приветствуется, направляя меня в правильном направлении:)

Спасибо, Рик 

<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">&nbsp;</td><td width="500"><img src='hours.gif' border=0></td>
</tr>    

<tr><td align='right'> Fri 07/10/2011 &nbsp; </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 &nbsp; </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 &nbsp; </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 ]

5 голосов
/ 16 сентября 2011

Атрибут name= не имеет смысла в тегах <img>. Если то, что вы на самом деле хотите, это идентификатор, то установите id= явно.

Возможно, вы захотите ознакомиться с библиотекой jQuery JS. Это облегчает выполнение многих подобных задач.

1 голос
/ 16 сентября 2011

Ваша проблема в том, что вы используете значение атрибута name , но используете его с getElementById , который работает с атрибутом id .Поскольку каждое значение атрибута имени уникально, вы можете просто изменить их на атрибуты id, и код должен работать.Или вы можете изменить вызов на getElementById на getElementsByName .

Поскольку getElementsByName возвращает коллекцию, если вы примете этот подход, вам нужно будет выбрать первого члена возвращенной коллекции, например: 

if (document.getElementsByName(itemname)[0].src ...)

Ночтобы быть устойчивым, вам понадобится: 

var el = document.getElementsByName(itemname)[0];
if (el && el.src == ...) {
    ...
}

Аналогичный подход должен быть принят с вызовом getElementById .

Код с использованием getElementById работает в IE (и некоторых браузерах, которые имитируют его поведение), потому что он всегда путал атрибуты name и id, рассматривая их по существу как одно и то же.Он не работает в браузерах, соответствующих стандартам, и, вероятно, не будет работать в IE 9 в стандартном режиме.

...