Как сделать кнопки на 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");
Вы выводите строку. Уберите двойные кавычки. И советую прочитать небольшую статью, на тему правильного выбора имен переменных