Tengo 2 imágenes en HTML.
Me gustaría agregar dinámicamente un botón en JavaScript debajo de cada imagen que cuando se hace clic para ocultar la imagen y luego el siguiente clic para mostrar la imagen nuevamente.
La idea es utilizar:
Código:
<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); }Envolvería cada imagen en un elemento de figure para que cada una contenga una imagen, y cuando llegue a agregarla, un botón.
// 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>