I have written this code need to use the DOM in javascripts <!DOCTYPE html> <htm
ID: 3722679 • Letter: I
Question
I have written this code need to use the DOM in javascripts
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" title="Cat happy to take picture">Cat</a>
</li>
<li>
<a href="https://i1.wp.com/motleydogs.com/wp-content/uploads/2012/03/dogs-selfie.jpg?fit=445%2C667">Dog Selfie</a>
</li>
<li>
<a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTD-0s9y6gw0HfxUrnmAhKCYIj-FftfchRU48AOsIHkOSZbeBTq">Eagle</a>
</li>
<li>
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bd07f82e-a30d-4e93-a2cf-0c16ea2b7f40/08-owl-opt.jpg">Owl</a>
</li>
</ul>
<img id="placeholder" src="http://wptest.io/demo/wp-content/uploads/sites/2/2012/12/unicorn-wallpaper.jpg" alt="my image gallery" height="400"/>
<p id="description">Choose an image.</p>
<script>
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</body>
</html>
Explanation / Answer
I assume that you want when somebody clicks on links, the image should be loaded in same window.
I have corrected your code and it is working fine.Please have a look at the modifications.
Let me know if you have any doubt.
Code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="https://beebom-redkapmedia.netdna-ssl.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" title="Cat happy to take picture">Cat</a>
</li>
<li>
<a href="https://i1.wp.com/motleydogs.com/wp-content/uploads/2012/03/dogs-selfie.jpg?fit=445%2C667" >Dog Selfie</a>
</li>
<li>
<a href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTD-0s9y6gw0HfxUrnmAhKCYIj-FftfchRU48AOsIHkOSZbeBTq" >Eagle</a>
</li>
<li>
<a href="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/bd07f82e-a30d-4e93-a2cf-0c16ea2b7f40/08-owl-opt.jpg">Owl</a>
</li>
</ul>
<img id="placeholder" src="http://wptest.io/demo/wp-content/uploads/sites/2/2012/12/unicorn-wallpaper.jpg" alt="my image gallery" height="400"/>
<p id="description">Choose an image.</p>
<script>
function showPic(whichpic) {
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</body>
</html>