transform translate with javascript не работает

Question

Так что я пытаюсь создать меню для гамбургеров, используя несколько простых JavaScript, оказывается, это не так просто. по какой-то причине мой transform translate не работает.

мой javascript код:

function hamburger() {
  var x = document.getElementById("links");
  if (x.style.transform === "translateX(0)") {
    x.style.transform === "translateX(100%)";
  } else {
    x.style.transform === "translateX(0)";
  }
}

мой css:

#links {
    position: absolute;
    width: 90%;
    overflow: hidden;
    top: 50px;
    right: 0;
    background-color: #dedede;
    min-height: calc(100vh - 50px);
    /*transform: translateX(100%);*/
}

Answer 1

С помощью x.style вы пытаетесь получить доступ к атрибуту встроенного стиля, а не к свойствам в ваших объявлениях стиля. (Ваш код также пытается выполнить назначение с оператором сравнения в качестве примечания)

Вместо этого вы могли бы легче переключать имя класса:

Javascript

// cache a reference to the #links element
var x = document.getElementById("links");

function hamburger() {
  x.classList.toggle('translated');
} 

CSS

#links {
    position: absolute;
    width: 90%;
    overflow: hidden;
    top: 50px;
    right: 0;
    background-color: #dedede;
    min-height: calc(100vh - 50px);
    transform: translateX(0);
}

#links.translated {
    transform: translateX(100%);
}

Answer 2

Только в if() условие === разрешено, и в вашем коде оно есть в if(){...}, поэтому попробуйте изменить код на

function hamburger() {
  var x = document.getElementById("links");
  if (x.style.transform === "translateX(0)") {
    x.style.transform = "translateX(100%)";
  } else {
    x.style.transform = "translateX(0)";
  }
}

ПРИМЕЧАНИЕ: = используется для присвоения значений, а === для проверки условий.