Как сделать кнопки на Js? Мучаюсь два дня, не работают. Помогите написать их пожалуйста

knopka = document.querySelector("knopka");


knop1 = document.querySelector("button");
console.dir(knop1);
knop2 = document.querySelector("button");
console.dir(knop2);

knop3 = document.querySelector("button");
console.dir(knop3);

kvadrat = document.querySelector("#kvadrat");


console.dir("kvadrat");


knopka.onclick = function() {
  if (kvadrat.style.background == "" || kvadrat.style.background == "red") {
    kvadrat.style.background = "green";
  } else {
    kvadrat.style.background == "red";
  }
}
knop1.onclick = function() {
  kvadrat.style.width = "100px";
  kvadrat.style.height = "100px";
  kvadrat.style.marginLeft = "100px";
}

knop2.onclick = function() {
  if (kvadrat.style.background == "" || kvadrat.style.background == "blue") {
    kvadrat.style.background = "yellow";
  } else {
    kvadrat.style.background == "blue";
  }
}
#kvadrat, #knopka {
  width: 400px;
  height: 400px;
  border-radius: 10px;
  background: red;
}
<div id="kvadrat"></div>

<div id="knopka">Нажми на меня</div>
<button id="knop1">Размер</button>
<button id="knop2">Цвет</button>
<button id="knop3">Фигура</button>


Ответы (2 шт):

Автор решения: Александр Сычёв

Вы не правильно находите элементы, сейчас у вас так

knopka = document.querySelector("knopka");

Если используете querySelector то нужно использовать #

knopka = document.querySelector("#knopka");

Или можно использовать, тогда не нужна #

knop1 = document.getElementById("knop1");

knopka = document.querySelector("#knopka");


knop1 = document.querySelector("#knop1");
knop2 = document.querySelector("#knop2");
knop3 = document.querySelector("#knop3");


kvadrat = document.querySelector("#kvadrat");



knopka.onclick = function() {
  if (kvadrat.style.background == "" || kvadrat.style.background == "red") {
    kvadrat.style.background = "green";
  } else {
    kvadrat.style.background == "red";
  }
}
knop1.onclick = function() {
  kvadrat.style.width = "100px";
  kvadrat.style.height = "100px";
  kvadrat.style.marginLeft = "100px";
}

knop2.onclick = function() {
  if (kvadrat.style.background == "" || kvadrat.style.background == "blue") {
    kvadrat.style.background = "yellow";
  } else {
    kvadrat.style.background == "blue";
  }
}
div {
  width: 400px;
  /*height: 400px;*/
  border-radius: 10px;
  background: red;
}
<div id="kvadrat"></div>

<div id="knopka">Нажми на меня</div>
<button id="knop1">Размер</button>
<button id="knop2">Цвет</button>
<button id="knop3">Фигура</button>

→ Ссылка
Автор решения: yspesny

Вы неправильно работаете с document.querySelector. Например тут в этих строчках:

knopka = document.querySelector("knopka"); 

knop1 = document.querySelector("button");
console.dir(knop1);

knop2 = document.querySelector("button");
console.dir(knop2);

knop3 = document.querySelector("button");
console.dir(knop3);

kvadrat = document.querySelector("#kvadrat");

console.dir("kvadrat");

Метод querySelector принимает селектор элемента, поскольку вы используете id в разметке, обращаться нужно с помощью селектора #. Проще говоря вы забыли знак #.

knopka = document.querySelector("knopka"); 

knop1 = document.querySelector("#knop1");
console.dir(knop1);

knop2 = document.querySelector("#knop2");
console.dir(knop2);

Тут сделана ошибка

console.dir("kvadrat");

Вы выводите строку. Уберите двойные кавычки. И советую прочитать небольшую статью, на тему правильного выбора имен переменных

→ Ссылка