Firefox에서 특정 JavaScript 이벤트가 작동하는 데 문제가 발생했습니다.

그래서 친구의 취미에 대한 사진과 정보를 보여주는 작은 웹 사이트를 만들었습니다. 주요 '그림'페이지는 하나의 센터 전체 크기 이미지가 포함 된 미리보기 이미지 모음이며, 미리보기 이미지를 클릭하면 더 큰 그림과 그 설명이 해당 미리보기 이미지와 일치하도록 변경됩니다. 이것은 예제 이미지이며, 다른 이름 (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 태그에서 온 클릭() 이벤트가 될 것이라고 생각, 나는 그것이 다른 브라우저에서 작동 알고 있기 때문에 문제가 코드 자체가 될 것이라고 생각하는 나에게 발생하지만하지 않았다 기능은 내가 사용

//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. 
     '; 
} 
}

내가있는 ID의 "pictureTitle"와 "pictureDescription"로 설정 일부 <p> 태그가 무엇인지 기능에서의 innerHTML을 가리 킵니다.

오, 고맙습니다. 오류 콘솔에 대해 알려 주신 Frédéric Hamidi에게 감사드립니다. 파이어 폭스는 pictureDescription.innerHTML 라인이 잘못되었다고 말했고, 지금은 내가 왜 그렇게 썼는지 알지 못한다. 내가 document.getElementById('pictureDescription').innerHTML으로 고정 시켰을 때, 문제가 해결되었고 pictureTitle 함수에서도 똑같이해야했습니다. 고마워요!

출처

2011-01-29 NoxiousNick

실제 코드는 어떻게 표시됩니까? FireBug를 통해 어떤 종류의 조사를 했습니까? 보고 된 오류가 있습니까? – Pointy

오류 콘솔을 호출하고 모양을 지정하려면'Ctrl + Shift + J '를 누르십시오. '* Swap()'함수 중 하나가 Firefox에서 예외를 throw합니다. –

정확히'titleSwap ('star')'은 무엇을합니까? img의 ID가 'titleSwap ('star1 ')'이 아니어야합니까? 그냥 추측 –

이 기능은이 같은 <p id="pictureDescription"> 태그를 변경 :

pictureDescription.innerHTML="description";

그리고 이런 식으로 일을해야 :

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

다른 브라우저는 그 어리 석음으로 올리고 내 실수 만회 백그라운드에서 파이어 폭스는 그것을 고치라고 말해야했다.

출처

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 이벤트가 작동하는 데 문제가 발생했습니다.

답변

관련 문제