No sé cómo escribir un detector de eventos simple para eliminar el 5% del ancho de los elementos cada vez que se hace clic en el botón. Del 100% al 0%.
substracktBtn.addEventListener('click', function(){ container.style.width = "calc(" + container.style.width + " - 5%)"; })En este código no obtuve errores, pero el ancho del div sigue siendo del 100% después de los clics.
Esta es tu solución:
const container = document.querySelector('div') const button = document.querySelector('button') const subtractPerClick = container.offsetWidth * 0.05 button.addEventListener('click', () => { if (container.offsetWidth - subtractPerClick > 0) container.style.width = container.offsetWidth - subtractPerClick + 'px' else container.style.width = '0px' }) div { height: 100px; width: 300px; background-color: darkblue; } <div></div> <button>Substract</button>Para eliminar el 5% del ancho actual. ¡Esto converge!
const container = document.getElementById('container'); const button = document.getElementById('button'); button.addEventListener('click', () => { container.style.width = container.offsetWidth * 0.95 + 'px' }) #container { background-color: red; width: 200px; height: 100px; } <div id="container"></div> <button id="button">Substract</button>Para eliminar el 5% del ancho inicial
const container = document.getElementById('container'); const button = document.getElementById('button'); let startWidth5Percent = container.offsetWidth * 0.05; button.addEventListener('click', () => { container.style.width = container.offsetWidth - startWidth5Percent + 'px'; }) #container { background-color: red; width: 200px; height: 100px; } <div id="container"></div> <button id="button">Substract</button>¿Qué tal simplemente:
substracktBtn.addEventListener('click', function(){ container.offsetWidth = container.offsetWidth * 0.95 });Nota: no probado, no estoy seguro si JS requiere que se agregue el 'px' al final, pero entiende la esencia.