ハイパーリンクonclickが機能していません

ハイパーリンクをクリックするたびに、同じページ内の画像を変更しようとしています。以下は私のコードです。ハイパーリンクをクリックすると、changeImage関数が呼び出されていません。助けてください.....ハイパーリンクonclickが機能していません

<body> 
     <h1>Click on any hyper link</h1> 

     <div class="left"> 
      <ul> 
       <li> 
        <a href="rabbit.jpeg" onclick="changeImage(this); return false;">Rabbit</a> 
       </li> 
       <li> 
        <a href="lion.jpeg" onclick="changeImage(this); return false;">Lion</a> 
       </li> 
       <li> 
        <a href="tiger.jpeg" onclick="changeImage(this); return false;">Tiger</a> 
       </li> 

       <li> 
        <a href="wolf.jpeg" onclick="changeImage(this); return false;">Wolf</a> 
       </li> 
      </ul> 
     </div> 

     <div class="right"> 
      <img src="rabbit.jpeg" id="placeHolder"></img> 
     </div> 

     <script> 
      function changeImage(element){ 
       var imgValue = element.getAttribute("href"); 
       var placeHolder = document.getElementbyId("placeHolder"); 
       placeHolder.setAttribute("src", imgValue); 
      } 
     </script> 
    </body>

出典

2016-07-21 Hari Krishna

あなたはそれが関数を呼び出していませんか？私はその機能に警告を出し、リンクをクリックすると警告が発せられます。私は最新のFirefoxでそれを走らせました。 –

機能は動作していますが、リンクが実行されており、ページがrabbit.jpeg、lion.jpegなどにリダイレクトされています。 – tnschmidt

私は問題があります。これはタイプミスの問題です。スクリプトの最後にアラートボックスを追加しましたが、このタイプミスのために動作しません。 –

あなたはあなたのJavaScriptを入力しています。

var placeHolder = document.getElementById("placeHolder");に

var placeHolder = document.getElementbyId("placeHolder");

変更します。

function changeImage(element){ 
 
       var imgValue = element.getAttribute("data-src"); 
 
       var placeHolder = document.getElementById("placeHolder"); 
 
       placeHolder.setAttribute("src", imgValue); 
 
      }

a:hover{ cursor:pointer; }

 <h1>Click on any hyper link</h1> 
 

 
     <div class="left"> 
 
      <ul> 
 
       <li> 
 
        <a href="#" data-src="rabbit.jpeg" onclick="changeImage(this); return false;">Rabbit</a> 
 
       </li> 
 
       <li> 
 
        <a href="#" data-src="lion.jpeg" onclick="changeImage(this); return false;">Lion</a> 
 
       </li> 
 
       <li> 
 
        <a href="#" data-src="tiger.jpeg" onclick="changeImage(this); return false;">Tiger</a> 
 
       </li> 
 

 
       <li> 
 
        <a href="#" data-src="wolf.jpeg" onclick="changeImage(this); return false;">Wolf</a> 
 
       </li> 
 
      </ul> 
 
     </div> 
 

 
     <div class="right"> 
 
      <img src="rabbit.jpeg" id="placeHolder"></img> 
 
     </div>

出典

2016-07-21 16:50:45 tnschmidt

ええ。私は問題がある。ソリューションに感謝します。 –

ハイパーリンクonclickが機能していません

答えて

関連する問題