Как исправить код js? Кнопка “Get function” появляется рядом с первой, а должна внизу.

Question

Как исправить код js? Кнопка “Get function” появляется рядом с первой, а должна внизу.

макар жуков Ученик (182), на голосовании 1 год назад

-Кнопка “Get function” появляется рядом с первой, а должна внизу.
-и после нажатия сдвигаются обекнопки, а должна одна.

Вот здание
Создайте текстовый файл, который при открытии в браузере выведет сообщение “Hello World!”
“Hello World!” должно быть написано внутри кнопки
При каждом нажатии на кнопку “Hello World!” её цвет должен меняться на красный и синий.
При нажатии на кнопку “Hello World!” под ней должна появиться новая кнопка “Get function”
При нажатии на кнопку “Hello World!” если нет кнопки “Get function”, то она должна появиться, если есть, то она должна сдвигаться вниз на 30px при каждом нажатии на кнопку “Hello World!”
Цвет кнопки “Hello World!” должен меняться за счет смены класса
js,css,html Должны находиться в разных файлов без потери функциональности
При нажатии на “Get function” нужно отправить Get запрос
URL(скрыл, не обязательно)

<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button id="helloBtn">Hello World!</button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

//css

.normal {
background-color: #4CAF50;
color: white;
}

.blue {
background-color: blue;
color: white;
}

.red {
background-color: red;
color: white;
}

#get-function-button {
margin-top: 30px;
}

//js

var helloBtn = document.getElementById('helloBtn');
var getFunctionBtn;

helloBtn.addEventListener('click', function() {
// Change color
if (helloBtn.classList.contains('red')) {
helloBtn.classList.remove('red');
helloBtn.classList.add('blue');
} else {
helloBtn.classList.remove('blue');
helloBtn.classList.add('red');
}

// Add get function button
if (!getFunctionBtn) {
getFunctionBtn = document.createElement('button');
getFunctionBtn.innerHTML = 'Get function';
getFunctionBtn.classList.add('getFunctionBtn');
getFunctionBtn.addEventListener('click', function() {
fetch('***')
.then(response => response.text())
.then(data => alert(data))
.catch(error => console.error(error));
});
helloBtn.parentNode.insertBefore(getFunctionBtn, helloBtn.nextSibling.nextSibling);
} else {
var marginTop = getFunctionBtn.style .marginTop || 0;
marginTop = parseInt(marginTop) + 25;
getFunctionBtn.style .marginTop = marginTop + 'px';
helloBtn.parentNode.insertBefore(getFunctionBtn, helloBtn.nextSibling.nextSibling); // перемещение кнопки вниз списка
}
});

Answer 1

 if (!getFunctionBtn) { 
    getFunctionBtn = document.createElement('button'); 
    getFunctionBtn.style.display = 'block';

По умолчанию, кнопка - строчный элемент.
Добавил строчку, со стилем display = 'block'; Заработало.

Это делает кнопку независимым от других и переносит на новую строчку.
_____________

 if (helloBtn.classList.contains('red')) { 
    helloBtn.classList.remove('red'); 
    helloBtn.classList.add('blue'); 
} else { 
    helloBtn.classList.remove('blue'); 
    helloBtn.classList.add('red'); 
}

В задании не сказано, что у кнопки изначально не должно быть цвета =)
Поэтому это всё можно записать одной строчкой через helloBtn.classList.toggle('blue');

 #helloBtn { background: red } 
#helloBtn.blue { background: blue }

id не рекомендуется использовать в CSS, но это уже другая история)