Форум

CopyDuck · #1 (**permalink**) 03.06.2023, 21:20

Добрый день.
Помогите, пожалуйста, написать скрипт.

Имеется код:

Вопрос 1 <text class="hidden"> Ответ 1</text>
Вопрос 2 <text class="hidden"> Ответ 2</text>
Вопрос 3 <text class="hidden"> Ответ 3</text>

Мне нужны 2 кнопки.
По нажатию первой кнопки "Вопрос" на странице рандомно должен появляться один из абзацев, при этом содержимое тегов <text></text> (то есть ответ) должно быть скрыто.
По нажатию второй кнопки "Ответ" должен отобразиться весь абзац целиком (то есть вопрос и ответ).

Иными словами, жму кнопку "Вопрос", вижу один из вопросов, жму кнопку "Ответ", вижу уже показанный вопрос и ответ к нему.
Нажимаю кнопку "Вопрос" повторно, получаю новый вопрос со скрытым ответом.

Примечание: теги я написал приблизительно. Их можно изменить, если это упростит задачу. Однако, и вопрос и ответ могут быть очень длинными (несколько предложений), и мне они необходимы в виде html-кода, а не в виде обычного текста (чтобы я мог выделить нужные слова, задать стили и так далее).

рони · #2 (**permalink**) 03.06.2023, 22:56

CopyDuck,

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        p.item,
        p.item .hidden {
            display: none;
        }
        p.item.open {
            display: block;
        }
        p.item.show,
        p.item.show .hidden {
            display: block;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const question = document.querySelector('button.question');
            const answer = document.querySelector('button.answer');
            const items = document.querySelectorAll('p.item');
            const len = items.length;
            let p = items[0];
            question.addEventListener('click', () => {
                p.classList.remove('show', 'open');
                p = items[len * Math.random() | 0];
                p.classList.add('open');
            });
            answer.addEventListener('click', () => {
                p.classList.remove('open');
                p.classList.add('show');
            });
        })
    </script>
</head>
<body>
    <button type="button" class="question">Вопрос</button>
    <button type="button" class="answer">Ответ</button>
    <p class="item">Вопрос 1</br> <text class="hidden"> Ответ 1</text></p>
    <p class="item">Вопрос 2</br> <text class="hidden"> Ответ 2</text></p>
    <p class="item">Вопрос 3</br> <text class="hidden"> Ответ 3</text></p>
</body>
</html>

CopyDuck · #3 (**permalink**) 03.06.2023, 23:15

рони. спасибо вам огромное!
Скажите, можно ли этот скрипт исправить, чтобы вопросы выводились по порядку, а не рандомно? Или чтобы рандомно выведенные вопросы хотя бы не повторялись?

voraa · #4 (**permalink**) 04.06.2023, 12:08

На мой взгляд не следует использовать элементы, которых не существует в спецификации (<text>)

Сообщение от CopyDuck

Или чтобы рандомно выведенные вопросы хотя бы не повторялись?

<!DOCTYPE HTML>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
        .item:not(.open) {
            display: none;
        }
        .item>.answer:not(.show) {
            display: none;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const brestart = document.getElementById('brestart');
            const bquestion = document.getElementById('bquestion');
            const banswer = document.getElementById('banswer');
            const items = document.querySelectorAll('.item');
            let itemopen;

            bquestion.addEventListener('click', () => {
                const itemsnotshown = document.querySelectorAll('.item:not(.shown)');  
                if ( itemopen) {
                    itemopen.classList.remove('open');
                    itemopen.querySelector('.answer').classList.remove('show')                   
                }           
                if (itemsnotshown.length === 0) return;
                const n = Math.floor(Math.random() * itemsnotshown.length);
                itemopen=itemsnotshown[n];
                itemopen.classList.add('open', 'shown');             
            });

            banswer.addEventListener('click', () => {
                itemopen.querySelector('.answer').classList.add('show');
            });

            brestart.addEventListener('click', () => {
                items.forEach(item => item.classList.remove('shown'));
                if ( itemopen) {
                    itemopen.classList.remove('open');
                    itemopen.querySelector('.answer').classList.remove('show')                   
                }           
            })
        })
    </script>
</head>
<body>
    <button type="button" id="brestart">Повторить</button>
    <br>
    <button type="button" id="bquestion">Вопрос</button>
    <button type="button" id="banswer">Ответ</button>
    <div class="item">
        <p class="question">Вопрос 1</p>
        <p class="answer"> Ответ 1</p>
    </div>
    <div class="item">
        <p class="question">Вопрос 2</p>
        <p class="answer"> Ответ 2</p>
    </div>
    <div class="item">
        <p class="question">Вопрос 3</p>
        <p class="answer"> Ответ 3</p>
    </div>
    <div class="item">
        <p class="question">Вопрос 4</p>
        <p class="answer"> Ответ 4</p>
    </div>
    <div class="item">
        <p class="question">Вопрос 5</p>
        <p class="answer"> Ответ 5</p>
    </div>

</body>
</html>

CopyDuck · #5 (**permalink**) 04.06.2023, 14:15

voraa, спасибо огромное за ваш скрипт. Все работает отлично.

Форум

Справочник

Discord чат

Курсы javascript