Простой оператор if, похоже, не работает, но JS-консоль не регистрирует никаких ошибок

Question

Очень простой оператор If, который я использовал ранее в других шаблонах, почему-то не работает, и я в недоумении. Эта функция является частью панели навигации, где страницы перемещаются и выходят из вида. У меня есть четыре кнопки навигации: Главная, Дизайн, Контакт, Отзывы. Вот код проблемы:

var currentPage = 1; 

function openDesigns() { 
    document.getElementById("homePage").style.left = "-" + 620 + "px"; 
    document.getElementById("designsPage").style.left = "-" + 620 + "px"; 
    document.getElementById("contactPage").style.left = "-" + 620 + "px"; 
    document.getElementById("testimonialsPage").style.left = "-" + 620 + "px"; 
    document.getElementById("homeButton").style.height = "50px"; 
    document.getElementById("homeButton").style.lineHeight = "40px"; 
    document.getElementById("designsButton").style.height = "60px"; 
    document.getElementById("designsButton").style.lineHeight = "57px"; 
    document.getElementById("contactButton").style.height = "50px"; 
    document.getElementById("contactButton").style.lineHeight = "40px"; 
    document.getElementById("testimonialsButton").style.height = "50px"; 
    document.getElementById("testimonialsButton").style.lineHeight = "40px"; 
    setTimeout(function() { 
     document.getElementById("homePage").style.zIndex = 0; 
     document.getElementById("designsPage").style.zIndex = 1; 
     document.getElementById("contactPage").style.zIndex = 0; 
     document.getElementById("testimonialsPage").style.zIndex = 0; 
     document.getElementById("designsPage").style.left = "-" + 0 + "px"; 
    }, 250); 
} 

document.getElementById("designsButton").onclick = function() { 
    if (currentPage == 1 || 3 || 4) { 
     openDesigns(); 
     currentPage = 2; 
     console.log(currentPage); 
    } else if (currentPage == 2) { 
     console.log("yup"); //this is here to check whether or not the code was getting to this point 
    } 
} 

Это всего лишь один набор из четырех функций (по одному на страницу). Переменная currentPage должна представлять, какая страница в настоящее время открыта (Home is 1, Designs is 2). Когда нажата кнопка «Навигатор дизайна», она должна проверить, открыта ли эта страница. Он отлично работает, если нет (он открывает страницу так, как должен), но проблема в том, что после того, как страница открыта, currentPage устанавливается в 2, и в следующий раз, когда нажимается кнопка, она должна запускать «else if ", где ничего не происходит ... но вместо этого он запускает оператор« if »AGAIN, который снова запускает новую анимацию, которой я не хочу.

Я не могу за всю жизнь понять, почему это происходит. Я думал, что код прочный. Я делал это много раз раньше. Есть идеи?

Answer 1

Изменить эту строку:

if (currentPage == 1 || 3 || 4) { 

Для этого:

if (currentPage == 1 || currentPage == 3 || currentPage == 4) { 

Answer 2

Изменить ваше состояние следующим образом

document.getElementById("designsButton").onclick = function() { 
    if (currentPage === 1 || currentPage === 3 || currentPage === 4) { 
     openDesigns(); 
     currentPage = 2; 
     console.log(currentPage); 
    } else if (currentPage == 2) { 
     console.log("yup"); //this is here to check whether or not the code was getting to this point 
    } 
}