We Keep Coding

How to get image url after click on a image in a image list

I have a list of image in index file as below:
<div id="image-list"
<ul>
<li data-id='1'>
<img src='image/001.jpg' alt=''>
</li>
<li data-id='2'>
<img src='image/002.jpg' alt=''>
</li>
<li data-id='3'>
<img src='image/003.jpg' alt=''>
</li>
</ul>
</div>
And I made an click event for image list:
document.getElementById("image-list").addEventListener('click', function(){
if(document.getElementById("background").style.backgroundImage == 'url("image/001.jpg")'){
console.log("I clicked in the image 001");
}
if(document.getElementById("background").style.backgroundImage == 'url("image/002.jpg")'){
console.log("I clicked in the image 002");
}
if(document.getElementById("background").style.backgroundImage == 'url("image/003.jpg")'){
console.log("I clicked in the image 003");
}
});
But I have issue load wrong url. When I am in image 001 and click on image 002, the function above show log "I clicked in the image 001" instead of "I clicked in the image 002" as I expect.
Anyone can help me give a right function that when I click on image 002, the console log print "I clicked in the image 002" as I expect.
Thanks.

You should target all the images then loop through them and attach the event. Inside the event handler function get the src attribute and match that.
Demo:
document.querySelectorAll("#image-list ul > li > img").forEach(function(el){
el.addEventListener('click', function(){
var src = this.getAttribute('src');
if(src == "image/001.jpg"){
console.log("I clicked in the image 001");
}
else if(src == "image/002.jpg"){
console.log("I clicked in the image 002");
}
else if(src == "image/003.jpg"){
console.log("I clicked in the image 003");
}
});
});
<div id="image-list">
<ul>
<li data-id='1'>
<img src='image/001.jpg' alt='11'>
</li>
<li data-id='2'>
<img src='image/002.jpg' alt='22'>
</li>
<li data-id='3'>
<img src='image/003.jpg' alt='33'>
</li>
</ul>
</div>

Displaying pictures in html

I am learning about the DOM and incorporating Javascript in html files, I have tried this code that display and hide pictures using the event listener click. however, pictures don't seem to appear even no error is detected in the Chrome console.
NOTE: I only posted the concerned code, I omitted some of the HTML tags
<style>
.hide{
display: none;
}
</style>
<main>
<ul>
<li><a data-img="face" id="facebook" href="#"> Facebook </a></li>
<li><a data-img="insta" id="instagram" href="#"> Instagarm </a></li>
<li><a data-img="snap" id="snapchat" href="#"> Snapchat </a></li>
</ul>
<img class="hide" id="face" scr="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" scr="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png" >
<img class="hide" id="snap" scr="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
if(pic.className === "hide"){
pic.className="";
} else {
pic.className= "hide";
}
}
</script>

First off, you issues is that it is src and not scr, so change that attribute and the images will show.
Second, I would recommend using classList with add, remove and contains. You could also use toggle to make your code even smaller like so:
<style>
.hide {
display: none;
}
</style>
<main>
<ul>
<li> <a data-img="face" id="facebook" href="#"> Facebook </a> </li>
<li> <a data-img="insta" id="instagram" href="#"> Instagarm </a> </li>
<li> <a data-img="snap" id="snapchat" href="#"> Snapchat </a> </li>
</ul>
<img class="hide" id="face" src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/facebook_square-128.png">
<img class="hide" id="insta" src="http://bikecleanse.com/wp-content/uploads/2016/10/Insta-Logo.png">
<img class="hide" id="snap" src="https://icon-icons.com/icons2/686/PNG/512/snapchat_snap_chat_icon_logo_social_app_red_icon-icons.com_61225.png">
</main>
<script type="text/javascript">
var face = document.getElementById('facebook');
var insta = document.getElementById('instagram');
var snap = document.getElementById('snapchat');
face.addEventListener("click", show);
insta.addEventListener("click", show);
snap.addEventListener("click", show);
function show() {
var picId = this.attributes["data-img"].value;
var pic = document.getElementById(picId);
pic.classList.toggle('hide', !pic.classList.contains('hide'))
}
</script>

I added the event input to your show function. I modified your show function like below. Check if this works for you:
function show(e) {
let picId = e.target.dataset.img;
let pic = document.getElementById(picId);
if(pic.classList.contains('hide'){
pic.classList.remove('hide');
}
else{
pic.classList.add('hide');
}
}

Changing an image based on the clicked link

I am trying to change the image based when someone clicks on a link. I have coded this so far:
<script>
function changeImage(e) {
var elem, evt = e ? e:event;
alert("Event is"+evt.target);//for testing
var image = document.getElementById('myImage');
var feat1 = document.getElementById('feat1');
var feat2 = document.getElementById('feat2');
var feat3 = document.getElementById('feat3');
var feat4 = document.getElementById('feat4');
if (evt.target.match(feat1.href)) {
image.src = "";
} else {
image.src = "";
}
}
</script>
And HTML:
<li><a name="a" href="#1" onclick="changeImage()" id="feat1">a</a></li>
<li><a name="story" href="#2" onclick="changeImage()" id="feat2">b</a></li>
<li><a name="rep" href="#3" onclick="changeImage()" id="feat3">c</a></li>
<li><a name="reg" href="#3" onclick="changeImage()" id="feat4">d</a></li>
The image does not change. I am using the alert for testing. I am a bit new to javascript so how do I go about solving this?

Pass the reference of the current clicked link into onclick handler:
html part:
<li><a name="a" href="#1" onclick="changeImage(this)" id="feat1">a</a></li>
<li><a name="story" href="#2" onclick="changeImage(this)" id="feat2">b</a></li>
<li><a name="rep" href="#3" onclick="changeImage(this)" id="feat3">c</a></li>
<li><a name="reg" href="#3" onclick="changeImage(this)" id="feat4">d</a></li>
Optimize your js part as shown below:
<script>
function changeImage(e) {
var elem = e.currentTarget,
id = elem.id,
href = elem.href;
if (<your_condition>) { // exemplary code
image.src = "";
} else {
image.src = "";
}
}
</script>

First, you do know that in your example, the last two hyperlinks have the same name and href values, right?
Next, onclick as an inline event handler was never standard and is considered bad form. Instead use the DOM standard, addEventListener() as follows:
<body>
<li><a name="a" href="#1" id="feat1">a</a></li>
<li><a name="story" href="#2" id="feat2">b</a></li>
<li><a name="rep" href="#3" id="feat3">c</a></li>
<li><a name="reg" href="#4" id="feat4">d</a></li>
<img id="myImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/2000px-NASA_logo.svg.png" height="200">
<script>
(function(){
var theAnchors = document.querySelectorAll("a[id^='feat']");
for(var i = 0; i < theAnchors.length; ++i) {
theAnchors[i].addEventListener("click", function(){
changeImage(this);
});
}
function changeImage(targetAnchor) {
var image = document.getElementById('myImage');
var href = targetAnchor.href;
if (href.indexOf("#3") > -1) {
image.src = "http://www.nasa.gov/centers/jpl/images/content/650602main_pia15415-43.jpg";
} else {
alert("else");
image.src = "http://www.nasa.gov/centers/goddard/images/content/280046main_CassAcomposite_HI.jpg";
}
}
()); // IIFE
</script>
</body>
In the following JSFiddle, clicking a, b or d will result in the first image going away and a replacement coming up, but when you click c, a different image comes up. Be patient, by the way, these are hi-res images and take a few seconds to load.
Check out a working sample: https://jsfiddle.net/adspxoc5/5/

Can't call custom plugin

I am having trouble calling a custom plugin.. The plugin enlargeImage isn't being called at all from the imageSwap jQuery code. I am new and still learning js. At this point, I am not sure what I am doing wrong. Any help or guidance is appreciated :)
Plugin code
(function($){
$.fn.enlargeImage = function() {
return this.each(function() {
alert("This is working!");
// preload images
$("#image_list a").(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
// set up event handlers for links
$("#image_list").find("a").click(function(evt) {
// swap image
var imageURL = $(this).attr("href");
$("#image").attr("src", imageURL);
//swap caption
var caption = $(this).attr("title");
$("#caption").text(caption);
// cancel the default action of the link
evt.preventDefault(); // jQuery method that's cross-browser compatible
}); // end click
// move focus to first thumbnail
$("li:first-child a:first-child").focus();
});
}
})(jQuery);
jqUERY CODE
$(document).ready(function() {
$('#image_list').enlargeImage();
}); // end ready
Html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Swap</title>
<link rel="stylesheet" href="main.css" />
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="jquery.imageSwap.js"></script>
<script src="image_swap.js"></script>
</head>
<body>
<section>
<h1>Ram Tap Combined Test</h1>
<ul id="image_list">
<li><a href="images/h1.jpg" title="James Allison: 1-1">
<img src="thumbnails/t1.jpg" alt=""></a></li>
<li><a href="images/h2.jpg" title="James Allison: 1-2">
<img src="thumbnails/t2.jpg" alt=""></a></li>
<li><a href="images/h3.jpg" title="James Allison: 1-3">
<img src="thumbnails/t3.jpg" alt=""></a></li>
<li><a href="images/h4.jpg" title="James Allison: 1-4">
<img src="thumbnails/t4.jpg" alt=""></a></li>
<li><a href="images/h5.jpg" title="James Allison: 1-5">
<img src="thumbnails/t5.jpg" alt=""></a></li>
<li><a href="images/h6.jpg" title="James Allison: 1-6">
<img src="thumbnails/t6.jpg" alt=""></a></li>
</ul>
<h2 id="caption">James Allison: 1-1</h2>
<p><img src="images/h1.jpg" alt="" id="image"></p>
</section>
</body>

Try replace this code
$("#image_list a").(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});
to
$("#image_list a").each(function() {
var swappedImage = new Image();
swappedImage.src = $(this).attr("href");
});

a href link clicked and div displays image

I would like a javascript method to display image in div depending on which a href link is clicked.
I have written some code but it needs developing further.
<script type=" ">
function changeImg(){
var image1 = new Image();
image1.src='car.png'
var imghol = document.getElementById("imageHolder");
var elements = document.getElementById("FS");
if(elements.onclick = function()){
imghol = image1;
}
</script>
<div class="ADS2"><h2>Vehicle Part</h2><p>Please select a part you wish to find;
<div class="vertical_menu">
<ul>
<li><a id="FS" href="#home" onclick="changeImg">Front Side</a></li>
<li><a id="RS" href="#news">Rear Side</a></li>
<li><a id="S" href="#contact">Side</a></li>
<li><a id="US"href="#about">Under Side</a></li>
<li><a id="I" href="#about">Interior</a></li>
</ul>
</div>
<div class="imageholder">
</div>
</div>

Keep it simple. Try this:
<script type="text/javascript">
function changeImg(image){
var imghol = document.getElementById("imageHolder");
imghol.src = image;
}
</script>
<div class="ADS2">
<h2>Vehicle Part</h2>
<p>Please select a part you wish to find;</p>
<div class="vertical_menu">
<ul>
<li><a id="FS" href="javascript:" onclick="changeImg('car.jpg');">Front Side</a></li>
<li><a id="RS" href="javascript:" onclick="changeImg('rear.png')">Rear Side</a></li>
<li><a id="S" href="javascript:" onclick="changeImg('caside.png')">Side</a></li>
<li><a id="US" href="javascript:" onclick="changeImg('under.png')">Under Side</a></li>
<li><a id="I" href="javascript:" onclick="changeImg('interior.png')">Interior</a></li>
</ul>
</div>
<div class="imageholder"><img id="imageHolder" /></div>
</div>

use this
HTML
<a onclick="changeImg('pic1.png')">Link 1</a>
<a onclick="changeImg('pic2.png')">Link 2</a>
<a onclick="changeImg('pic3.png')">Link 3</a>
<a onclick="changeImg('pic4.png')">Link 4</a>
.....
<div class="imageholder">
<img id="change_img_target" />
</div>
Javascript
function changeImg(url) {
document.getElementById("change_img_target").src = url;
}

You can also achieve this with jQuery. Be sure to include the jQuery library in your file. :)
HTML:
Link 1
Link 2
<div id="div">
</div>
jQuery (add this to the bottom of your page):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
function changeImg(url) {
var image = "<img src='url' />";
$("#div").html(image);
}
});
</script>

# Naveen,
You can achieve the solution using any of the following 2 answers.
Ans1:
<script type="text/javascript">
function preloader()
{
var imgs = ['chart1.jpg','chart2.jpg','chart3.jpg','chart4.jpg','chart5.jpg']; // take array of images
var container = document.getElementById('photos');
var docFrag = document.createDocumentFragment();
imgs.forEach(function(url, index, originalArray) {
var img = document.createElement('img');
img.src = url;
docFragenter code here.appendChild(img);
});
container.appendChild(docFrag);
}
</script>
<body onload="preloader();">
<div>
<table width="100%" style="height: 100%;" border="0">
<tr>
<td>
<p id="photos" onclick="preloader()" />
</td>
</tr>
</table>`
</div>
Ans2:
function preloader()
{
var imgs=['chart1.jpg','chart2.jpg','chart3.jpg','chart4.jpg','chart5.jpg'];
var container = document.getElementById('photos');
for (var i = 0, j = imgs.length; i < j; i++) {
var img = document.createElement('img');
img.src = imgs[i]; // img[i] refers to the current URL.
container.appendChild(img);
}
}
Link for more Help:
How to add a list of images to the document from an array of URLs?