I have to Enlarge an image by 20px by clicking on the plus button, and shrink it by 20 clicking the minus button. The maximum width of the image is 500px, and the minimum is 250px.
<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>
I tried using clientWidth to get the current width of the image and increment it, but it seems it doesn't work
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";
}
}
You need to add Event listener to plus and minus buttons by this way or you can also add onclick events on plus and minus button as well.
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);
Your code looks good. Only what missing is the eventListener. I added inline. You can add in your JS code block if you like more.
working example
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>