Javascript-форум - Найти образец

Javascript-форум (https://javascript.ru/forum/)

- Firefox/Mozilla (https://javascript.ru/forum/css-html-firefox-mizilla/)

- - Найти образец (https://javascript.ru/forum/css-html-firefox-mizilla/85350-najjti-obrazec.html)

Найти образец

Здравствуйте, JS-уникумы! :victory:
Ищу адекватное решение своей наивной затее, поэтому, если кому не лень, то подскажите вариант в следующем простом примере: в качестве образца представлен блок div с временной серой заглушкой, в котором в последующем должно отображаться одно из случайных изображений данных td таблицы table. Далее при клике на изображении в таблице по образцу div'а на странице должен появиться alert "OKl!", а при неправильном выборе alert "Wrong". Пока так...
P.S. В состоянии самостоятельно сделать подобное крайне корявыми устаревшими средствами, поэтому буду рад любым современным решениям!
*Чем бы дитя не тешилось :write: , лишь бы не плакало*

<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>

Всем хорошего настроения!

Борис К,

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <style>
        td,
        div.show {
            width: 100px;
            height: 100px;
        }

        div.show {
            transition: 1s;
            background-size: 200px;
            background-position: -50px;
        }

        [data-id="1"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
        }

        [data-id="2"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
        }

        [data-id="3"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
        }

        [data-id="4"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
        }

        [data-id="5"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
        }

        [data-id="6"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
        }
    </style>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () => {
            const tab = document.querySelector('table');
            const cells = document.querySelectorAll('td');
            const len = cells.length;
            const img = document.querySelector('.show');
            let id = 0,
                i;

            function showImg() {
                do {
                i = Math.trunc(Math.random() * len);
                i = cells[i].dataset.id;
                } while (i == id);
                id = i;
                img.dataset.id = id;
            }

            tab.addEventListener('click', ({
                target
            }) => {
                if (target = target.closest('[data-id]')) {
                    const curid = +target.dataset.id;
                    let win = curid == id;
                    let txt = win ? 'OK!' : 'Wrong!';
                    alert(txt);
                    if (win) showImg();
                }
            });
            showImg();

        });
    </script>
</head>

<body>
    <div class="show"></div>
    <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>
</body>

</html>

Рони, просто здорово всё! :dance:
:thanks: :thanks: :thanks:
P.S. Возможно, ещё что-нибудь надумаю спросить... так что, извините!))

Здравствуйте, Рони! :victory:
Экспериментируя :write: , дополнил ваш код ещё таблицей и стилем с изображениями букв, используя скрипт jQuery для рандомного выбора по кнопке таблицы только с цифрами или только с буквами, но сам понимаю, что это всё коряво налеплено и просто "смешно" :cray:
Возможно ли подобное адекватно реализовать с помощью чистого JS?

Все, что делается на jquery можно написать на чистом js

Voraa, да, мне как раз откликнулись ваши слова про устаревшее jQuery, поэтому проявил интерес к лаконичному pure JS :write:

Цитата:

Сообщение от Борис К

рандомного выбора по кнопке таблицы только с цифрами или только с буквами

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <style>
        td,
        div.show {
            width: 100px;
            height: 100px;
        }

        div.show {
            transition: 1s;
            background-size: 200px;
            background-position: -50px;
        }

        [data-id="1"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=1);
        }

        [data-id="2"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=2);
        }

        [data-id="3"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=3);
        }

        [data-id="4"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=4);
        }

        [data-id="5"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=5);
        }

        [data-id="6"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=6);
        }
       .letter [data-id="1"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=a);
        }

       .letter [data-id="2"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=b);
        }

       .letter [data-id="3"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=c);
        }

       .letter [data-id="4"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=d);
        }

       .letter [data-id="5"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=e);
        }

       .letter [data-id="6"] {
            background-image: url(https://placehold.co/100x100/ffffff/3a3b3c?font=playfair-display&text=f);
        }
    </style>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", () => {
            const tab = document.querySelector('table');
            const cells = document.querySelectorAll('td');
            const len = cells.length;
            const img = document.querySelector('.show');
            let id = 0,
                i;

            function showImg() {
                do {
                i = Math.trunc(Math.random() * len);
                i = cells[i].dataset.id;
                } while (i == id);
                id = i;
                img.dataset.id = id;
            }

            tab.addEventListener('click', ({
                target
            }) => {
                if (target = target.closest('[data-id]')) {
                    const curid = +target.dataset.id;
                    let win = curid == id;
                    let txt = win ? 'OK!' : 'Wrong!';
                    alert(txt);
                    if (win) showImg();
                }
            })
            showImg();
            function toggleLetter()
            {
              document.body.classList.toggle('letter', Math.random() > .5)
            }
            toggleLetter();
            btn.addEventListener('click', toggleLetter)
        });
    </script>
</head>

<body>
    <div class="show"></div>
    <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">random letter/number</button>
</body>

</html>

Восхитительно! :dance:
Какие возможности, какие способности! :write:
Рони, огромная благодарность за полезные знания!
:thanks: :thanks: :thanks: