Firefoxで動作する特定のJavaScriptイベントを取得する際に問題が発生しました。

これで、友人の趣味に関する写真や情報を表示するための小さなウェブサイトを構築しました。メインの「写真」ページは、1つのセンターのフルサイズの画像を含むサムネイルの束です。サムネイルをクリックすると、そのサムネイルと一致する大きな画像とすべての説明が変更されるように設計されました。これはサンプル画像です。他の名前は別の名前（star2、star3、そのようなもの）を除いてまったく同じです。したがって、onclickイベントはJavascriptの原因です。これはChrome、Opera、IEで動作しますが、Firefoxでは何もしません。私はJavascriptを有効にしていることを知っています.Javascriptを使用する小さなもの（ページの上部にあるいくつかのボタンのように、中央の画像のサイズを変更するなど）があり、機能します。だから、これを実行させないためにFirefoxは何をしていますか？私はそれが他のブラウザで動作します知っているので、Firefoxで動作する特定のJavaScriptイベントを取得する際に問題が発生しました。

<img class="thumbnail" onclick="descriptionSwap('star1'); titleSwap('star'); imageSwap('images/star1.jpg');" id="star1" title="Click me!" src="images/small_star1.jpg"/>

それは問題はコード自体だと思うように私には発生しなかった、私はそれがIMGタグ内のonclick（）イベントになるだろうと思ったが、ここではです私が使用する関数：

//Changes the center image 
function imageSwap(newSource) { 
document.getElementById('centerimage').src = newSource; 
} 
//Changes the title of the picture 
function titleSwap(newTitle) { 
if (newTitle=='star') { 
    pictureTitle.innerHTML= 'Stars'; 
} 
} 
//Changes the description 
function descriptionSwap(newDescription) { 
if (newDescription=='star1') { 
     pictureDescription.innerHTML=' 
     //Big long description, cut it out to save room here. 
     '; 
} 
}

は、私は、関数内に何innerHTMLのポイントであるIDの「pictureTitle」と「pictureDescription」に設定し、いくつかの<p>タグを持っています。

私はそれを修正しました。エラーコンソールについて教えてくれたフレデリック・ハミディに感謝します。 Firefoxは私にpictureDescription.innerHTMLという行が間違っていたと言っていました。そして、今私はなぜそんなに最初に書きましたか分からないので、明らかになっています。 document.getElementById('pictureDescription').innerHTMLに修正したところ、問題が修正されました。またpictureTitle関数でも同じことをしなければなりませんでした。みんなありがとう！

出典

2011-01-29 NoxiousNick

実際のコードはどのように見えますか？あなたはFireBug経由で何の調査をしましたか？エラーが報告されていますか？ – Pointy

Ctrl + Shift + Jでエラーコンソールを起動して見せてください。あなたの '* Swap（）'関数の一つがFirefoxで例外をスローする可能性があります。 –

正確に 'titleSwap（ 'star'）'は何をしますか？ imgのidが 'titleSwap（ 'star1'）'であるべきではないと思っていますか？ちょっと推測する –

機能は、このような<p id="pictureDescription">タグ変更：

pictureDescription.innerHTML="description";

をし、それはこのようにそれを行っている必要があります。他のブラウザでは、そのばかなまねを我慢し、私のミスのために作られ

document.getElementById('pictureDescription').innerHTML="description";

バックグラウンドでは、しかし、Firefoxはそれを修正するように私に教えるためにボールを持っていた。

出典

2011-01-29 19:30:09 NoxiousNick

問題が解決した場合でも。あなたはJQueryを考えましたか？

<!doctype html> 
<html lang="pt-br"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <style type="text/css"> 
      body {background-color: #2E2E2E} 
      img {margin:auto} 
      em {margin:auto;width:1280px;color:#B2B2B2} 
     </style> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(function(){ 
       $('.thumbnail').live('click',function(){ 
        $(this).attr('src', 'http://automodifiedesign.com/wp-content/uploads/2010/11/Black-Lamborghini-Ankonian-Concept-rear-view-2.jpeg'); 
        $(this).attr('title', 'New Title'); 
        $(this).attr('alt', 'New alternate description'); 
        $('em.thumbnail').text('Lamborghini Ankonian Concept Rear View'); 
       }); 
       $('.thumbnail').css({'display':'block'}); 
      }); 
     </script> 
     <title>Lamborghine Ankonian Concept!</title> 
    </head> 
    <body> 
     <img class="thumbnail" id="star1" alt="alt description" title="Click me!" src="http://automodifiedesign.com/wp-content/uploads/2010/11/Black-Lamborghini-Ankonian-Concept-rear-view-3.jpg"/> 
     <em class="thumbnail">Lamborghini Ankonian Concept!</em> 
    </body> 
</html>

出典

2011-01-30 20:32:46 tenshimsm

正直言って、私はJQueryを使ったことはありません。私はそれについて多くのことを聞いたことがありますが、私はそれをどのように使うことができるのか、何ができるのかを見つけることに時間を割いていません。私は自分の自由時間に私自身のウェブ開発を学んでいるだけなので、私はまだ学んでいます。私は「何かをすることができれば、私の上でそれをする方法を考え出したい自分の。"しかし、提案に感謝！ – NoxiousNick

Firefoxで動作する特定のJavaScriptイベントを取得する際に問題が発生しました。

答えて

関連する問題