2016-07-21 5 views
0

Я пытаюсь изменить изображение на той же странице, всякий раз, когда пользователь нажимает на гиперссылку. Ниже мой код. Когда я нажал на любую гипер ссылку, он не вызывает функцию 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> 
+0

Вы уверены, что это не вызов функции? Я помещаю предупреждение в функцию, и когда я нажимаю ссылку, срабатывает предупреждение. Я запустил его в последнем Firefox. –

+0

Функция работает, но ссылка выполняется, и страница перенаправляется на rabbit.jpeg, lion.jpeg и т. Д. – tnschmidt

+0

У меня проблема. Это опечатка. Я добавил окно предупреждения в конце сценария, из-за этой опечатки он не работает. –

ответ

2

У вас есть опечатка на вашем 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>

+0

Я .. У меня проблема. Спасибо за решение. –

Смежные вопросы