Почему мой оператор if-else не выполняется правильно?

Question

У меня есть вопрос, почему мое утверждение if-else не работает.

Я получил форму с вводом текста, и когда пользователь вводит желаемый размер, он должен редактировать изображение в реальном времени. Я использую методы addclass и removeclass из jQuery. Это мой сценарий:

function slide() {
    var n = Number(document.getElementById('Getal1').value)

    if (n >= 101 && n < 201)
        $(openDiv1());

    else if(n > 200)
        $(openDiv2());

    else if(n >= 0 && n < 101)
        $(closeDiv());

    else {
        alert("You did not enter a number!")
    }
}

$(function openDiv1() {

    $( "#ombouw_wrap" ).addClass( "Addclass_ombouw_wrap_2block", 1, callback );
    return false;
});

function callback() {
    setTimeout(function() {
        $( "#midden" ).removeClass( "Addclass_ombouw_wrap_1block Addclass_ombouw_wrap_3block" );
    }, 0 );
}

$(function openDiv2() {

    $( "#ombouw_wrap" ).addClass( "Addclass_ombouw_wrap_3block", 1, callback );
    return false;
});

function callback() {
    setTimeout(function() {
        $( "#midden" ).removeClass( "Addclass_ombouw_wrap_1block Addclass_ombouw_wrap_2block" );
    }, 0 );
}

$(function closeDiv() {

    $( "#ombouw_wrap" ).addClass( "Addclass_ombouw_wrap_1block", 1, callback );
    return false;
});

function callback() {
    setTimeout(function() {
        $( "#midden" ).removeClass( "Addclass_ombouw_wrap_2block Addclass_ombouw_wrap_3block" );
    }, 0 );
}

window.onload = closeDiv;

А это мой HTML-код:

Lengte: <INPUT TYPE="text" NAME="numeric" onKeyup="slide()" id="Getal1" onKeyPress="return checkIt(evt)">
x Hoogte: <input type="text" ID="Getal2" onKeyPress="return checkIt(evt)">
x Diepte: <input type="text" ID="Getal3" onKeyPress="return checkIt(evt)">
</form>

Когда вы перезагружаете страницу, вы видите, что она не начинается с closedivs, но начинается сразу с добавления классов без выполнения оператора if-else.

Что я здесь не так делаю?

Answer 1

Когда вы перезагружаете страницу, вы видите, что она не начинается с closedivs, но начинается с добавления классов без выполнения оператора if-else.

Это потому, что jQuery рассматривает $(function) как удобную форму $.ready(function): переданный объект-функция выполняется при загрузке страницы .

То есть $(function openDiv1() {...}) определяет объект-функцию, который затем передается в jQuery для автоматического выполнения при загрузке страницы. Вместо этого удалите функции из $(...). Например, function openDiv1() {...} будет достаточно. (Это также исправит ошибки, связанные с невозможностью вызова openDiv1 - поскольку это выражение функции, оно не будет назначено переменной / свойству в области.)

---

Ниже описана проблема с функцией slide.

JavaScript делает некоторые принуждения; ниже показано, почему ветвь else не будет достигнута:

Number("")         // same as Number(0)
Number("") >= 0    // true

Но на самом деле, пожалуйста, не используйте Number (это объект-обертка для number), рассмотрите parseInt(str, 10) в качестве замены. В качестве дополнительного бонуса parseInt("", 10) оценивается как NaN (не 0), и, поскольку NaN >= 0 имеет значение false, это решит начальную проблему.

function slide(){
    var n = parseInt(document.getElementById('Getal1').value, 10)
    if (n >= 0 && n <= 100) {
        $(closeDiv())
    } else if (n > 100 && n <= 200) {
        $(openDiv1())
    } else if (n > 200) {
        $(openDiv2())
    } else {
        alert("You did not enter a number!")
    }
}

Также обратите внимание на изменения согласованности, которые я добавил. Квадратные скобки не нужны, но я считаю, что это помогает в письменной форме в согласованном, хорошо отформатированном / хорошо с отступом стиле. Другие вещи, на которые следует обратить внимание, это упорядочение операторов if / else, а также сравнений (оставьте это «текущим»).

Удачного кодирования.

Answer 2

Вы упаковываете свои функции в $(), которые будут выполнять их, когда вы пытаетесь определить их ...

// alerts 1
$(function myFunc(){ alert(1) })

Вам нужно определить свои функции перед вашими операторами if / else, и просто так ...

// does not execute until called
function myFunc(){ ... }

Answer 3

Я не программист Javascript, но я полагаю, что вам не хватает скобок в ваших утверждениях IF / ELSE. Правильный синтаксис должен быть, согласно W3 :

if (condition1){
    Handle condition1
    }
else if (condition2){
    Handle condition2
    }
else{
    Handle the rest
    }

Конечно, если это не так, и фигурные скобки не нужны, тогда я надеюсь, что кто-то еще может вам помочь:).