Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.07.2023, 08:59
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Найти образец
Здравствуйте, 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>

Всем хорошего настроения!
Ответить с цитированием
  #2 (permalink)  
Старый 08.07.2023, 10:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

click fo table
Борис К,
<!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>

Последний раз редактировалось рони, 08.07.2023 в 10:44.
Ответить с цитированием
  #3 (permalink)  
Старый 08.07.2023, 11:21
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Рони, просто здорово всё!

P.S. Возможно, ещё что-нибудь надумаю спросить... так что, извините!))
Ответить с цитированием
  #4 (permalink)  
Старый 10.07.2023, 09:47
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Здравствуйте, Рони!
Экспериментируя , дополнил ваш код ещё таблицей и стилем с изображениями букв, используя скрипт jQuery для рандомного выбора по кнопке таблицы только с цифрами или только с буквами, но сам понимаю, что это всё коряво налеплено и просто "смешно"
Возможно ли подобное адекватно реализовать с помощью чистого JS?
Ответить с цитированием
  #5 (permalink)  
Старый 10.07.2023, 10:05
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,742

Все, что делается на jquery можно написать на чистом js
Ответить с цитированием
  #6 (permalink)  
Старый 10.07.2023, 10:13
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

Voraa, да, мне как раз откликнулись ваши слова про устаревшее jQuery, поэтому проявил интерес к лаконичному pure JS
Ответить с цитированием
  #7 (permalink)  
Старый 10.07.2023, 15:31
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Сообщение от Борис К
рандомного выбора по кнопке таблицы только с цифрами или только с буквами
<!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>

Последний раз редактировалось рони, 10.07.2023 в 15:34.
Ответить с цитированием
  #8 (permalink)  
Старый 10.07.2023, 20:14
Кандидат Javascript-наук
Отправить личное сообщение для Борис К Посмотреть профиль Найти все сообщения от Борис К
 
Регистрация: 22.02.2017
Сообщений: 145

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как найти контейнер в iframe? Katy93 Общие вопросы Javascript 5 12.04.2022 18:16
Найти класс в классе vburyagin Общие вопросы Javascript 2 19.02.2019 08:36
Найти в строке комбинацию символов rodiony4 Элементы интерфейса 4 03.10.2016 04:52
найти редактируемую ячейку по имени класса kristow Элементы интерфейса 6 29.09.2015 15:01
как найти и удалить массив из массива? FRIE Общие вопросы Javascript 8 14.03.2011 15:48