Здравствуйте, как правильно кодировать эту функцию

Question

Как вы могли заметить, я очень плохо знаком с JS, пытающимся понять функции, и я пытаюсь достичь, когда размер моего устройства меньше 736, кнопка должна анимироваться ...! Таким образом, я получил правильную работу кнопки, однако изо всех сил пытался работать с указанным c размером экрана ..! Может кто-нибудь помочь, пожалуйста, спасибо заранее.

HTML

<button class="btn">CLICK ME</button>

css

.btn {
    width: 200px;
    height: 100px;
    text-align: center;
    padding: 40px;
    text-decoration: none;
    font-size: 20px;
    letter-spacing: .6px;
    border-radius: 5px;
    border: none;
    }

Javascript

$(window).resize(function(){
    if ($(window).width() <= 736){  
        // do something


let myBtn = document.querySelector(".btn");

let btnStatus = false;

myBtn.style.background = "#FF7F00";


function bgChange() {
    if (btnStatus == false) 
        {
            myBtn.style.background = "#FF0000"; 
            btnStatus = true;
        }

    else if (btnStatus == true) 
        {
            myBtn.style.background = "#FF7F00";
            btnStatus = false;
        } 
 }

myBtn.onclick = bgChange; 

    }   
}); 

Answer 1

Вот реализация того, что вы пытаетесь сделать, использующего:

1. class для изменения стиля кнопки вместо style,
2. vanilla JavaScript вместо из jQuery.

Хорошая идея - использовать класс, поскольку он сохраняет стилизацию в CSS и в коде JavaScript.

Использование vanilla JavaScript всякий раз, когда вы можете предпочтительнее.

Вот два новых класса:

.btn-small-screen {
  background: #FF7F00;
}

.btn-clicked {
  background: #FF0000;
}

.btn-small-screen класс применяется, когда окно маленькое, .btn-clicked переключается всякий раз, когда кнопка нажал.

Вот код JavaScript:

let myBtn = document.querySelector('.btn');
let isSmallWindow = () => window.innerWidth <= 736;

function toggleButtonOnClick () {
  myBtn.classList.toggle('btn-clicked');
}

function setButtonMode () {
  if (isSmallWindow()) {
    myBtn.classList.add('btn-small-screen');
    myBtn.addEventListener('click', toggleButtonOnClick);
  } else  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
  }
}

// setup mode on resize
window.addEventListener('resize', setButtonMode);

// setup mode at load
window.addEventListener('load', setButtonMode);

Ссылки:

• Document.querySelector ()
• Window.innerWidth
• Element.classList
• DOMTokenList.toggle ()
• DOMTokenList.add ()
• DOMTokenList.remove ()
• EventTarget.addEventListener ()

Рабочий пример:

let myBtn = document.querySelector('.btn');
let isSmallWindow = () => window.innerWidth <= 736;

function toggleButtonOnClick () {
  myBtn.classList.toggle('btn-clicked');
}

function setButtonMode () {
  if (isSmallWindow()) {
    myBtn.classList.add('btn-small-screen');
    myBtn.addEventListener('click', toggleButtonOnClick);
  } else  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
  }
}

// setup small mode on resize
window.addEventListener('resize', setButtonMode);

// setup small mode at load
window.addEventListener('load', setButtonMode);

    .btn {
      width: 200px;
      height: 100px;
      text-align: center;
      padding: 40px;
      text-decoration: none;
      font-size: 20px;
      letter-spacing: .6px;
      border-radius: 5px;
      border: none;
    }

    .btn-small-screen {
      background: #FF7F00;
    }

    .btn-clicked {
      background: #FF0000;
    }

<button class="btn">CLICK ME</button>

Примечание: Есть одна оптимизация, которую я пропустил, поэтому код будет легче следовать.

Обратите внимание, что setButtonMode () каждый раз меняет DOM, даже если он уже установлен в нужный режим. Это неэффективно.

Чтобы повысить эффективность и изменять DOM только в случае необходимости, вы можете ввести переменную состояния (назовите ее smallMode) и установить ее значение true, когда это необходимо. Вот так:

let smallMode = false;

function setButtonMode () {
  if (isSmallWindow()) {
    if (!smallMode) {
      myBtn.classList.add('btn-small-screen');
      myBtn.addEventListener('click', toggleButtonOnClick);
      smallMode = true;
    }
  } else if (smallMode)  {
    myBtn.classList.remove('btn-small-screen');
    myBtn.classList.remove('btn-clicked');
    myBtn.removeEventListener('click', toggleButtonOnClick);
    smallMode = false;
  }
}