2011-09-15 13 views
0

通常、私は、コードについて聞くIEから離れて物事の下で働くが、アイブ氏は、反対の問題を抱えてJavascriptの動的画像は、IEではないFFで動作に変更するコード、クロムなど:(

ここのリンクです:。

http://www.underagedriving.co.uk/ins/timeclick2.php IEの下にすべてのエラーを蹴るが、文句を言わない何かでボールをプレーdoesntの

とコードのスナップショット(オペラ、iPhoneのSafari、クロム、FF)私はそのは愚かなものになるだろうが、上の働いた知っ

このすべて 私の目はちょっとガラス張りだった。

すべてのヘルプは、正しい方向に私を指して:)

感謝感謝、の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">&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> 
+1

何が問題になるのですか? –

+0

Chromiumの状態: 'Uncaught TypeError:null(timeclick2.php:34)のプロパティ 'src'を読み込めません。 BTW: 'if(convexisting!=" ")'テストvarがブランクではないが、varに単一のspace-char以外のものが含まれているかどうかをチェックしません。 – feeela

+0

非IEでは、グラフィックは黄色と青色の間で切り替わりません。 – Rik

答えて

5

name=属性は<img>タグの意味がありません。実際に欲しいものがIDの場合は、id=を明示的に設定します。

jQuery JSライブラリに慣れ親しむことができます。これは、このような多くのタスクをはるかに簡単にします。

+0

ありがとうございます。単に名前を変更する= id = part働いた(少なくとも私のiPhoneでは、ここでネットブックにバーIEは何も持っていないので)。 :) – Rik

+0

名前**の属性**は無意味ではありません。個々の要素(ドキュメント内で一意である場合)を選択するため、または名前を共有する要素のグループを選択するために使用できる* img *要素の有効な属性です。 OPの問題は、名前属性値がIDを必要とするメソッドで使用されていることです。 IEでは要素のIDとNAME属性またはプロパティの違いを知らないため、関連するW3C仕様に準拠したブラウザではIEが動作します。 – RobG

+0

うわー、あなたは正しい - 私はHTML4仕様をチェックしたところであり、 'name ='は ''タグで定義されている。しかし、それは "後方互換性のために"含まれているにすぎないので、 'id ='を使うことはおそらく正しい長期的解決策であろう。 – duskwuff

1

あなたの問題は、あなたが名前属性の値を使用しますがID属性に取り組んでいますgetElementByIdを、とそれを使用していることです。各name属性値は一意であるため、id属性に変更するだけでコードが機能します。電話をgetElementByIdgetElementsByNameに変更することもできます。あなたはそのアプローチを採用した場合、コレクションを返すgetElementsByNameは、あなたが返されるコレクションの最初のメンバー、のようなものを選択する必要があります

ので:

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

しかし、堅牢であることを、あなたが必要になります。

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

同様のアプローチは、getElementByIdをへの呼び出しで採用されるべきです。

getElementByIdを使用しているコードは、name属性とid属性を常に混同しており、本質的に同じものとして扱うため、IE(およびその動作を模倣する一部のブラウザ)で動作します。標準に準拠したブラウザでは動作しません。また、IE 9では標準モードでは動作しない可能性があります。

+0

おかげで、Robは、なぜそれが一方的にしか動作しないのかを完全に理解しています:) – Rik

関連する問題