Здравствуйте,
Voraa!
В принципе возможно ли реализовать то, что я нафантазировал ниже, разбирая код, представленный выше Вами?)
Например, в таблице рандомно отразились изображения чисел "6", "1", "4", "2". Необходимо пройтись кликами по ним в порядке возрастания "1", "2", "4", "6" до выведения alert "OK!"
P.S. Понимаю, что изображения должны быть переименованы в "01.jpg", "02.jpg" и т.д.
<!DOCTYPE html>
<html>
<head>
<style>
[data-id="1"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
width: 100px;
height: 100px;
}
[data-id="2"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
width: 100px;
height: 100px;
}
[data-id="3"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
width: 100px;
height: 100px;
}
[data-id="4"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
width: 100px;
height: 100px;
}
[data-id="5"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
width: 100px;
height: 100px;
}
[data-id="6"] {
background-image:url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
width: 100px;
height: 100px;
}
</style>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
const tab = document.querySelector('table');
const cells = [...document.querySelectorAll('td')];
const btn = document.getElementById('btn');
let win;
function show2x2 () {
cells.sort(() =>Math.round(Math.random())-0.5);
tab.rows[0].innerHTML = '';
tab.rows[0].append(...cells.slice(0,2));
tab.rows[1].innerHTML = '';
tab.rows[1].append(...cells.slice(2,4));
};
if (win) alert("OK!");
btn.addEventListener('click', show2x2);
show2x2();
});
</script>
</head>
<body>
<table>
<tr>
<td data-id="1"></td>
<td data-id="2"></td>
<td data-id="3"></td>
</tr>
<tr>
<td data-id="4"></td>
<td data-id="5"></td>
<td data-id="6"></td>
</tr>
</table>
<button id="btn">New</button>
</body>
</html>