I am trying to create an image viewer in javascript. So, there's this function where I am decreasing the size of image when '-' button is pressed or mouse wheel is scrolled downwards. But after the image's height goes below 10px, I can't enlarge it back anymore. So, to tackle that issue, I thought of putting an if statement where it'll check the height of the image and won't decrease the size if it's not above 10px. But, that if statement is not working. And I can't figure out why.
Below is a piece of my code. I tried to put an console.log() to check if it's going into the if statement or not. But, it's not going.
function decrease_image(){
var img = new Image();
img = image_viewer_pics[current_viewer_image];
if (img.style.height < "100%"){
img.style.margin = "auto 0px";
}
if (img.style.height > "10px"){
img.height = img.height / 1.1;
console.log("greater than 10px");
}
}
Here's a function to illustrate the comments - you have to normalize variables before comparing. Compare strings with strings and numbers with numbers.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes
function decrease_image(){
let img = image_viewer_pics[current_viewer_image]; //= new Image();
let is_perc = img.style.height.includes("%");
let height_n = +img.style.height.replace(/[^0-9.]/g, '') // this removes any non-number (except .) - the + sign in front turns it into type Number
if (is_perc && height_n < 100){
img.style.margin = "auto 0px";
} else if (!is_perc && height_n > 10){
img.height = (height_n / 1.1) + "px";
console.log("greater than 10px");
}
}