Блог

Главная - Вопросы по программированию - Почему этот оператор Javascript ‘if’ не работает?

Почему этот оператор Javascript ‘if’ не работает?

#javascript #if-statement

#javascript #if-statement

Вопрос:

Я пытаюсь создать средство просмотра изображений на javascript. Итак, есть эта функция, в которой я уменьшаю размер изображения при нажатии кнопки ‘-‘ или прокрутке колесика мыши вниз. Но после того, как высота изображения опустится ниже 10 пикселей, я больше не могу увеличить его обратно. Итак, чтобы решить эту проблему, я подумал о том, чтобы поместить оператор if, где он будет проверять высоту изображения и не уменьшит размер, если он не превышает 10 пикселей. Но этот оператор if не работает. И я не могу понять, почему.

Ниже приведен фрагмент моего кода. Я попытался поставить console.log() , чтобы проверить, входит ли он в оператор if или нет. Но это не происходит.

 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");
    }
    
}

Комментарии:

1. вы должны преобразовать строку в число и сравнить…

2. но приведенный выше оператор if, в котором я сравниваю его со 100% размером, работает.

3. сравнение по строке отличается от сравнения по номеру. «9px»> «10px», потому что первый символ «9» больше «1», поэтому вы должны преобразовать в число

4. По той же причине, которая if(img.style.height < "one hundred percent") не будет работать. Для JS это всего лишь две (бессмысленные) строки, которые он сравнивает, и он сравнивает их байт за байтом, слева направо.

Ответ №1:

Вот функция, иллюстрирующая комментарии — вы должны нормализовать переменные перед сравнением. Сравните строки со строками и числа с числами.

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 amp;amp; height_n < 100){
        img.style.margin = "auto 0px";
    } else if (!is_perc amp;amp; height_n > 10){
        img.height = (height_n / 1.1)   "px";
        console.log("greater than 10px");
    }
}
Метки: