How to get the value of child element when clicked on parent element

Question

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>

Answer 1

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>