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>