debugger
const container = document.getElementById('container');
const containerOne = document.getElementById('container1');
const containerTwo = document.getElementById('container2');
const containerThree = document.getElementById('container3');
function makeCounter() {
let currentCount = 1;
return function() {
return currentCount++;
};
}
counter = makeCounter();
function randomCoin() {
return (Math.floor(Math.random() * 2) === 0);
}
function getRandomInt(min, max) {
if(!min) {
min = Math.ceil(1);
}
if(!max) {
max = Math.floor(5);
}
return Math.floor(Math.random() * (max - min)) + min;
}
randomInt = getRandomInt();
function onAddButtonClick() {
let random = randomCoin();
if(random == true) {
addButton('create');
} else {
addButton('delete');
}
};
function onDeleteButtonClick() {
const createButtons = [];
for (let child of containerOne.children) {
if (child.getAttribute('type') == 'create') {
createButtons.push(child);
}
}
if (createButtons.length < 2) {
containerOne.removeChild(containerOne.lastChild);
return;
}
let i = getRandomInt(0, createButtons.length);
$('#container1').children().not(createButtons[i]).remove();
};
function addButton(buttonType) {
const button = document.createElement('div');
button.setAttribute('type', buttonType);
if(buttonType == 'create') {
button.classList.add('create-button', 'buttons');
button.textContent = 'Create';
button.setAttribute('data-num', counter());
button.addEventListener('click', onAddButtonClick);
} else if(buttonType == 'delete') {
button.classList.add('delete-button', 'buttons');
button.textContent = 'Delete';
button.setAttribute('data-num', counter());
button.addEventListener('click', onDeleteButtonClick);
}
containerOne.appendChild(button);
};
addButton('create');body {
text-align: center;
}
div {
border-radius: 5px;
padding: 15px;
line-height: 1.5;
margin: 30px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
#container1, #container2, #container3 {
width: 250px;
padding: 5px;
position: absolute;
}
#container1 {
left: 20px;
float: left;
}
#container2 {
left: 280px;
float: none;
}
#container3 {
left: 540px;
float: right;
}
.buttons {
font-size: 18px;
cursor: pointer;
width: 200px;
margin: 15px auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.buttons::after {
content: attr(data-num); /*Получает значение атрибута data num*/
position: absolute;
display: inline-block;
bottom: 0px;
right: 5px;
}
.create-button {
border: 1px solid #00ad5c;
color: #00ad5c;
position: relative;
}
.create-button:hover {
background: #00ad5c;
color: white;
transition: all 1s;
}
.delete-button {
border: 1px solid #75002d;
color: #75002d;
position: relative;
}
.delete-button:hover {
background: #75002d;
color: white;
transition: all 1s;
}
#message {
border-radius: 50px;
width: 450px;
height: 65px;
margin: 30px auto;
background: #eee;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
position: fixed;
bottom: 0;
margin: 0 auto 10px;
}
.container {
margin-left: auto;
margin-right: auto;
width: 700px;
}<!DOCTYPE html>
<html>
<head>
<title>||Работа с элементами||</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div id="container1">Тут будет колонка 1</div>
<div id="container2">Тут будет колонка 2</div>
<div id="container3">Тут будет колонка 3</div>
<div id='message'>
При нажатии на кнопку пройзойдет одно из двух: либо создастся новая кнопка,
либо все вернется на начальную позицию.
</div>
</div>
<script src="/script.js"></script>
</body>
</html>The code works as follows: In Container 1, there is a "Create" button. when you click, the "delete" or "create" buttons are created randomly. When deleting, only one random "create" button remains. Question: how can I make new buttons appear in a random container when I click on the "Create" button?
Aucun commentaire:
Enregistrer un commentaire