Tengo que ampliar una imagen en 20 píxeles haciendo clic en el botón más y reducirla en 20 haciendo clic en el botón menos. El ancho máximo de la imagen es de 500 px y el mínimo de 250 px.
<div id="doc"> <div id="buttons"> <button id="plus" onclick="imagePlus()">+</button> <button id="moins" onclick="imageMinus()">-</button> </div> <img id="sun" src="images/soleil.jpg" alt="soleil" /> </div> Intenté usar clientWidth para obtener el ancho actual de la imagen e incrementarlo, pero parece que no funciona
var imagePlus = function() { var img = document.getElementById("sun"); var currWidth = img.clientWidth; if(currWidth == 500){ null } else{ img.style.width = (currWidth + 20) + "px"; } } var imageMinus = function() { var img = document.getElementById("sun"); var currWidth = img.clientWidth; if(currWidth == 250){ null } else{ img.style.width = (currWidth - 20) + "px"; } }Debe agregar el detector de eventos a los botones más y menos de esta manera o también puede agregar eventos al hacer clic en los botones más y menos.
const imagePlus = function () { var img = document.getElementById("sun"); var currWidth = img.clientWidth; if (currWidth == 500) { null; } else { img.style.width = currWidth + 20 + "px"; } }; const imageMinus = function () { var img = document.getElementById("sun"); var currWidth = img.clientWidth; if (currWidth == 250) { null; } else { img.style.width = currWidth - 20 + "px"; } }; document.querySelector("#plus").addEventListener("click", imagePlus); document.querySelector("#minus").addEventListener("click", imageMinus);Su código se ve bien. Solo lo que falta es el eventListener. Agregué en línea. Puede agregar su bloque de código JS si desea más.
ejemplo de trabajo
var imagePlus = function() { var img = document.getElementById("sun"); var currWidth = img.clientWidth; if(currWidth == 500){ return false; } else{ img.style.width = (currWidth + 20) + "px"; } } var imageMinus = function() { var img = document.getElementById("sun"); var currWidth = img.clientWidth; if(currWidth == 250){ null } else{ img.style.width = (currWidth - 20) + "px"; } } <div id="doc"> <div id="buttons"> <button id="plus" onclick="imagePlus()">+</button> <button id="moins" onclick="imageMinus()">-</button> </div> <img id="sun" src="https://via.placeholder.com/300" alt="soleil" /> </div>