I have a list here when the list item is clicked the respective image should appear inside the aside. I need the function to get img src(href="") and implement that into the img src. Here's what I have so far:
<aside>
<img src="" alt="" id="image">
</aside>
<div>
<ul classes="test-images">
<li><a onclick="event.preventDefault()" href="images/1.jpg">1</a></li>
<li><a onclick="event.preventDefault()" href="images/2.jpg">2</a></li>
<li><a onclick="event.preventDefault()" href="images/3.jpg">3</a></li>
<li><a onclick="event.preventDefault()" href="images/4.jpg">4</a></li>
</ul>
</div>
<div>
<ul classes="real-images">
<li><a onclick="event.preventDefault()" href="images/1.jpg">1</a></li>
<li><a onclick="event.preventDefault()" href="images/2.jpg">2</a></li>
<li><a onclick="event.preventDefault()" href="images/3.jpg">3</a></li>
<li><a onclick="event.preventDefault()" href="images/4.jpg">4</a></li>
</ul>
</div>
var changePic = evt => {
var links = $("a");
for (var i = 0; i < links.length; i++) {
$(evt.currentTarget) = links[i];
var image;
document.getElementById('image').src = image;
links.herf = image.src;
}
}
$(document).ready(function(){
var aElements = $("a");
aElements.each(evt => {
var image = $(evt.currentTarget).attr("href");
aElements.click(changePic);
}
});
thank you for the help
var changePic = evt => {
var links = $("a");
for (var i = 0; i < links.length; i++) {
$(evt.currentTarget) = links[i];
var image;
document.getElementById('image').src = image;
links.herf = image.src;
}
}
I guess there is error on this code:
Im thinking var image; should be assigned to image tag which should be image = document.getElementById('image')
links.herf = image.src; links is a list of anchor.
Should assign the anchor href value to image src which should be image.src = links[i].href
This might work, since you are using jQuery
// Listen to anchor click
$('a').click(function(e) {
// assign tag to variable
var link = $(this);
// Set image source base on anchor href attribute
$('#image').attr('src', link.href)
})