Dynamically build a page with JavaScript-CodePudding

I have 2 images in HTML. I would like to add dinamically in JavaScript a button under each image which when is clicked to hide the image and then the next click to show the imagine again. The idea is to use:

querrySelectorAll
for Loop
createElement (button) to the buttons
add addEventListener
appendChild

code:

<h2>Create a new site</h2>
<p>Site – Manage Sites - New:</p>
<dd><img class="screenshot" width="238" height="222" src="https://picsum.photos/200" alt="screenshot" /></dd>
<p>“What would you like to call the website?”</p>
<dd><img class="screenshot" width="238" height="222" src="https://picsum.photos/300" alt="screenshot" /></dd>



img.screenshot {
  margin-bottom: 20px;
  margin-top: 20px;
}


.btn-styled {
  font-size: 14px;
  margin: 10px;
  padding: 0 5px;
  line-height: 2;
  
}


var eScreens = document.querySelectorAll('img.screenshot');
for (var i = 0; i <= eScreens.length; i  ) {
    var button = document.createElement("button");
    button.id = "myButton";
    button.innerHTML = "Show";
    button.className = "btn-styled";
    button.style.background = "orange";
    button.addEventListener("click", function() {
  });
    var dd = document.getElementsByTagName("dd")[0];
  dd.appendChild(button);
}

CodePudding user response：

I would wrap each image in a figure element so that each contains an image, and when you come to add it, a button.

// Cache the figures
const figures = document.querySelectorAll('figure');

// For each add a button, and attach an event listener
figures.forEach(figure => {
  addButton(figure);
  figure.addEventListener('click', handleClick, false);
});

// Create a button, and add it to the end of
// each figure element
function addButton(figure) {
  const button = '<button>Hide</button>';
  figure.insertAdjacentHTML('beforeend', button);
}

// Because the listener is attached to the figure
// we need to check if the element we clicked was the
// button. We can then get the image, and then
// use a class to toggle its visibility
// and update the text in the button
function handleClick(e) {
  const { nodeName, parentNode, textContent } = e.target;
  if (nodeName === 'BUTTON') {
   const image = parentNode.querySelector('img');
   image.classList.toggle('hide');
   e.target.textContent = textContent === 'Hide' 
     ? 'Show'
     : 'Hide';
  }
}

figure { display: inline-block; margin: 0; }
button { display: block; margin: 0 auto; }
.hide { visibility: hidden; }

<figure>
  <img src="https://dummyimage.com/100x100/ffaaaa/000" />
</figure>
<figure>
  <img src="https://dummyimage.com/100x100/aaffaa/000" />
</figure>
<figure>
  <img src="https://dummyimage.com/100x100/aaaaff/000" />
</figure>