Paulsw01,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="style.css"> -->
<title>Document</title>
<style type="text/css">
.wrapper-cards {
display: flex;
flex-wrap: wrap;
margin-top: 40px;
}
.card {
width: 120px;
height: 200px;
margin-right: 35px;
margin-bottom: 35px;
border: 2px solid black;
text-align: center;
font-size: 128px;
cursor: pointer;
transition: 1s;
}
.card:hover {
box-shadow: 0 0 5px #2f2d2d;
}
.card.open {
background-color: #DCDCDC;
}
</style>
</head>
<body>
<div class="wrapper">
<input class="input" value="4" type="number" min="4" max="10" step="2">
<button class="button">Начать игру</button>
</div>
<div class="wrapper-cards">
<!-- <div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div> -->
</div>
<script>
let input = document.querySelector('.input');
let button = document.querySelector('.button');
let wrapperCards = document.querySelector('.wrapper-cards');
// создаем масив
let result = 4
let newArr = new Array();
button.onclick = () => {
let value = +input.value;
// очищаем .wrapper-cards
if (document.querySelector(".card")) {
wrapperCards.innerHTML = ''
}
// проверяем введеное число
if (value % 2 == 0 && value <= 10 && value >= 4) {
result = value;
} else {
result = 4;
input.value = 4
alert('Введите четное число от 4 до 10')
}
// задаем ширину .wrapper-cards
wrapperCards.style.width = (160 * result / 2) + 'px';
// создаем новый масив
for (let i = 0; i < result; i++) {
newArr[i] = Math.trunc(i/2) + 1
}
// перемешиваем масив
function shuffle(array) {
array.sort(() => Math.random() - 0.5);
}
shuffle(newArr);
// создаем div .card
function getListContent() {
let fragment = new DocumentFragment();
for (let i = 0; i < result; i++) {
card = document.createElement("div");
card.classList.add('card');
card.dataset.number = newArr[i];
fragment.append(card);
}
return fragment;
}
wrapperCards.append(getListContent()); // (*)
console.log(result)
// находим .card
// let cardInDom = document.querySelector(".card");
let cardInDom = document.querySelectorAll(".card");
// вызываем функцию по клику на .card и показываем цифру
let temp;
for (let card of cardInDom) {
card.onclick = () => {
if (card.classList.contains("open")) return;
let cardValue = card.dataset.number;
card.innerHTML = cardValue;
if (temp && temp != card) {
if (temp.dataset.number == cardValue) {
temp.classList.add("open");
card.classList.add("open");
temp = null;
} else {
temp.innerHTML = "";
temp = card;
}
} else temp = card;
};
};
};
</script>
</body>
</html>