Здравствуйте, JS-уникумы!
Ищу адекватное решение своей наивной затее, поэтому, если кому не лень, то подскажите вариант в следующем простом примере: в качестве образца представлен блок div с временной серой заглушкой, в котором в последующем должно отображаться одно из случайных изображений данных td таблицы table. Далее при клике на изображении в таблице по образцу div'а на странице должен появиться alert "OKl!", а при неправильном выборе alert "Wrong". Пока так...
P.S. В состоянии самостоятельно сделать подобное крайне корявыми устаревшими средствами, поэтому буду рад любым современным решениям!
*Чем бы дитя не тешилось
, лишь бы не плакало*
<html>
<head>
<style>
div, td {
width: 100px;
height: 100px;
}
[data-id="red"] {
background-color: red;
}
[data-id="yellow"] {
background-color: yellow;
}
</style>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", () => {
const tbl = document.querySelector('table');
const td = [...document.querySelectorAll('td')];
let win;
td.sort(() =>Math.round(Math.random())-0.5);
tbl.rows[0].innerHTML = '';
tbl.rows[0].append(...td.slice(0, 2));
//alert ("Wrong!")
if (win) alert("OK!");
})
</script>
</head>
<body>
<div><img src="https://via.placeholder.com/100x100.png"></div>
<br /><br /><br />
<table>
<tr>
<td data-id="red"></td>
<td data-id="yellow"></td>
</tr>
</table>
</body>
</html>
Всем хорошего настроения!