如何重置功能？

Question

我有一个报价应用程序，这是我的代码。问题是当我单击按钮并随机出现三个div元素之一时，因为我将style.display设置为block现在，我再次单击生成器，希望一个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

您将要做的是每次生成新的随机报价时都将所有报价隐藏起来。我还更新了您的随机函数，以便它使用引号div的数量，以便为您提供更多动态。

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>

Answer 2

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 3

嗯，您可以在CSS中定义另一个类，而不是每次都将随机选择的div的显示设置为禁止显示，而是希望切换元素的类。 （以防止出现问题），例如：quotes[random].classList.toggle("yourDesiredStyle");