I want to get the value of the src of the <img> when clicked on each parent div. How can I get the value for each parent div > child element?
const mybtn = document.getElementById('maybe');
const parent = document.getElementById('parent');
mybtn.addEventListener('click', function(e) {
parent.innerHTML = `
<div id="main">
<div id="one" class="one"><img src="https://www.w3schools.com/html/pic_trulli.jpg"</div>
<div id="one" class="one"><img src="https://www.w3schools.com/html/img_girl.jpg"</div>
<div id="one" class="one"><img src="https://www.w3schools.com/html/img_chania.jpg"</div>
</div>
`;
});
parent.addEventListener('click', (e) => {
if (e.target.closest('#main .one')) {
//Close Button
alert('dis');
}
});<div id="parent"></div>
<button id="maybe">Set</button>No need to worry about the parent divs. Use your existing listener but check the clicked element matches an image element, and then log its src.
Note: ids have to be unique. No more than one on a page.
const mybtn = document.getElementById('maybe');
const parent = document.getElementById('parent');
mybtn.addEventListener('click', function(e) {
parent.innerHTML = `
<div id="main">
<div class="one"><img src="https://www.w3schools.com/html/pic_trulli.jpg" /></div>
<div class="one"><img src="https://www.w3schools.com/html/img_girl.jpg" /></div>
<div class="one"><img src="https://www.w3schools.com/html/img_chania.jpg" /></div>
</div>`;
});
parent.addEventListener('click', (e) => {
if (e.target.matches('img')) {
console.log(e.target.src);
}
});img { width: 100px; }
.one { padding: 2em; background-color: #efefef; margin: 0.5em; width: 150px; }<div id="parent"></div>
<button id="maybe">Set</button>Edit: following your comment.
Instead of having one listener you will need to add listeners to each div with a one class after you've added the HTML to the page.
const mybtn = document.getElementById('maybe');
const parent = document.getElementById('parent');
mybtn.addEventListener('click', function(e) {
parent.innerHTML = `
<div id="main">
<div class="one"><img src="https://www.w3schools.com/html/pic_trulli.jpg" /></div>
<div class="one"><img src="https://www.w3schools.com/html/img_girl.jpg" /></div>
<div class="one"><img src="https://www.w3schools.com/html/img_chania.jpg" /></div>
</div>`;
const ones = document.querySelectorAll('.one');
ones.forEach(one => {
one.addEventListener('click', handleClick, false);
});
});
function handleClick(e) {
if (e.target.matches('.one')) {
const img = e.target.querySelector('img');
console.log(img.src);
}
}img { width: 100px; }
.one { padding: 2em; background-color: #efefef; margin: 0.5em; width: 150px; }
.one:hover { background-color: #dfdfdf; }<div id="parent"></div>
<button id="maybe">Set</button>