javascript - hyperlink onclick is not working -


i trying change image in same page, whenever user click on hyper link. following code.when clicked on hyper link, not calling function changeimage. please.....

<body>         <h1>click on 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>

you have typo in javascript. change

var placeholder = document.getelementbyid("placeholder");

to

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 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>


Comments

Post a Comment