как сбросить функцию?

Question

У меня есть приложение для цитат, и это мой код. проблема заключается в том, что когда я нажимаю кнопку, и случайно появляется один из трех элементов div, потому что я теперь устанавливаю блокировку style.display, я снова нажимаю на генератор и хочу, чтобы div снова появлялся случайным образом, но отображение предыдущего div снова не отображается!

let quotes = document.getElementsByClassName("quotes");

let btn = document.getElementById("generate");

btn.addEventListener('click',function(){
    let random = Math.floor(Math.random() * 3); 
    quotes[random].style.display = "block";
})

Answer 1

let quotes = document.getElementsByClassName("quotes");
let btn = document.getElementById("generate");

btn.addEventListener('click',function(){
    const previousQuote = document.querySelector('.quotes.show');

    if (previousQuote) previousQuote.classList.remove('show');

    const random = Math.floor(Math.random() * 3);

    quotes[random].classList.add('show');
});

Если вы используете класс, а не встроенный стиль, вы можете легко добавить его, а также использовать его, чтобы найти тот, который вам нужно вернуть, чтобы быть скрытым.

Answer 2

Что ж, вы можете определить другой класс в CSS, и вместо того, чтобы выставлять случайно выбранный дисплей div для блокировки каждый раз, вы можете переключать класс элемента. (чтобы предотвратить проблему) как: quotes[random].classList.toggle("yourDesiredStyle");

Answer 3

То, что вы хотите сделать, это скрывать все цитаты каждый раз, когда вы генерируете новую случайную цитату. Я также обновил вашу случайную функцию, чтобы она использовала количество кавычек, чтобы она могла быть более динамичной c для вас.

let quotes = document.getElementsByClassName("quotes");

let btn = document.getElementById("generate");

btn.addEventListener('click',function(){
    for(var i = 0;i<quotes.length;i++){
      quotes[i].style.display = "none";
    }
    
    let random = Math.floor(Math.random() * quotes.length); 
   
    quotes[random].style.display = "block";
});

.quotes{display:none;}

<div class="quotes">1</div>
<div class="quotes">2</div>
<div class="quotes">3</div>
<button id="generate" type="button">Generate</button>