На мой взгляд не следует использовать элементы, которых не существует в спецификации (<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>