Losowanie cytatów

Mam skrypt, który wczytuje mi autora i cytat. Jest to wykonywane po kliknięciu w przycisk. Mam jednak problem, że pierwszy cytat ładuje się zaraz po załadowaniu strony, a chciałbym, żeby się pojawiał dopiero po kliknięciu w przycisk. Czyli na początku jest tekst "Kliknij aby wylosować cytat na dziś" i dopiero po kliknięciu losuje się cytat.
I druga sprawa, czy można zrobić, żeby to wyglądało jak losowanie i np. po wciśnięciu przycisku pojawiałby się na chwilę napis "Losuję" i np. jakiś animowany gif (np. kręcące się kółko) i dopiero potem pokazał się wylosowany cytat?

HTML

<div class="container-lot">
  <main>
    <div class="quote-container">
		<blockquote>
			<p class="quote-text" id="quote">Kliknij, aby wylosować cytat na dziś</p>
			<p id="quote-author" class="quote-author"></p>

		</blockquote>

		<span class="button-container">
			<button class="button button_quote" id="quote-button">Losuję patrona</button>
		</span>

    </div>

  </main>

</div>

JS

var quoteArray = [
    {
        content: "cytat 1",
        author: "autor 1"
    },
    {
        content: "cytat 2",
        author: "autor 2"
    },
    {
        content: "cytat 3",
        author: "autor 3"
    },
    {
        content: "cytat 4",
        author: "autor 4"
    },

];

//grab html elements
var button = document.getElementById('quote-button'),
	quote = document.getElementById('quote'),
	author = document.getElementById('quote-author'),
    tweet = document.getElementById('tweet'),
    random;

//Generate a Random Quote
window.onload = randomQuote;
button.addEventListener('click', randomQuote);

//run the function so there are no double buttons happening
tweetQuote();

//random quote function
function randomQuote (){
    //get a random number to pick a random quote object
    random = Math.floor(Math.random() * quoteArray.length);
    //get that random quote's content
    quote.innerHTML = quoteArray[random].content;
	//get that random quote's author
    author.innerHTML = '— ' + quoteArray[random].author;

    //Tweet that new generated quote
    tweetQuote();
}

//Dynamically Generate Content + Button
function tweetQuote (){
    var quoteShort = quote.innerHTML,
        quoteShortAuthor = author.innerHTML.substr(2).trim(),
        msg ='';

    //are there two tweet buttons? also from http://jsfiddle.net/LEBz8/1/
    var elem = document.getElementById('twitterbutton');
    if (elem !== null) {
        elem.parentNode.removeChild(elem);
    }

    //cut the message to fit the 140 length + leave some extra
    if(quoteShort.length + quoteShortAuthor.length <= 90){
        msg = '"' +quoteShort + '" by ' + quoteShortAuthor;
    }else {
        msg = '"'+ quoteShort.substr(0, 65) + '[...]" by ' + quoteShortAuthor;
    }

CSS

.container-lot {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.container-lot:after {
  content: " ";
  display: block;
  clear: both;
}

@media screen and (min-width: 480px) {
  .container-lot {
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
  .container-lot:after {
    content: " ";
    display: block;
    clear: both;
  }
}

.quote-container {
  width: 100%;
  margin: 0 auto 23.72881%;
  padding: 6.77966% 0;
}

@media screen and (min-width: 1110px) {
  .quote-container {
    width: 100%;
  }
}

.quote-container blockquote {
  margin-bottom: 6.77966%;
  font-family: 'Neuton', serif;
  line-height: 1.3;
}

.quote-container .quote-text, .quote-container .quote-author {
  font-size: 250%;
  font-weight: 400;
  letter-spacing: 0.025em;
  text-align: center;
}

.quote-text {
	color: red;
}

@media screen and (min-width: 480px) {
  .quote-container .quote-text, .quote-container .quote-author {
    font-size: 250%;
  }
}

.quote-container .quote-author {
  text-align: center;
  font-size: 125%;
}

@media screen and (min-width: 480px) {
  .quote-container .quote-author {
    font-size: 125%;
  }
}

.button-container {
  display: block;
  text-align: center;
}

.button {
  padding: 1em;
  width: 50%;
  border: none;
  border-radius: 0.5em;
  background-color: red;
  font-size: 150%;
  transition: all 0.2s ease-in-out;
}

.button:hover, .button:focus {
  background-color: blue;
  color: #F8BBD0;
}

Che, che. Niedawno był tu człowiek, który prosił o coś dokładnie odwrotnego, w tym samym zadaniu.

Usuń:
window.onload = randomQuote;

Dziękuję bardzo! Super, o to mi chodziło! A czy jeszcze da radę wydłużyć czas losowania i ewentualnie dodać napis "Losuję" i animowanego gifa?

xap napisał(a):

wydłużyć czas losowania

https://www.w3schools.com/jsref/met_win_settimeout.asp

i ewentualnie dodać napis "Losuję" i animowanego gifa?

Możesz je sobie umieścić na ukrytej warstwie i manipulować jej display = none / block.

Chciałem skorzystać z funkcji setTimeout, ale jedyne co to udało mi się zrobić, to to, że pierwszy losowany cytat losuje się bez opóźnienia, natomiast później cytaty losują się w zadanym czasie czyli co 3 sek. Nie wiem, może nie powinienem opóźniać funkcji randomQuot, albo może wpisuję tą funkcje nie w tym miejscu skryptu co potrzeba? Jeśli chodzi o ukrytą warstwę to już zupełnie nie wiem o co chodzi i już sobie chyba odpuszczę, bo to przekracza moje umiejętności :-)

Zrób sobie:
funkcję losuj_cytat która natychmiastowo losuje cytat,
funkcję wywolaj_z_opoznieniem_funkcje_losuj_cytat która wywołuje funkcję losuj_cytat poprzez setTimeout z zadanym opóźnieniem.

Jeszcze raz dziękuję za pomoc. Niestety nie udało mi się uruchomić tego opóźnienia :-), ale przynajmniej po wejściu na stronę nie wyświetla się cytat, tylko trzeba go sobie dopiero wylosować :-).

xap napisał(a):

Jeszcze raz dziękuję za pomoc. Niestety nie udało mi się uruchomić tego opóźnienia :-), ale przynajmniej po wejściu na stronę nie wyświetla się cytat, tylko trzeba go sobie dopiero wylosować :-).

Dodałem opóźnienie:

https://jsfiddle.net/cb7eksvw/

<img src="https://i.postimg.cc/Bn7v7jqm/loading.gif" class="loading" alt="">

  .loading {
    margin: 0 auto;
    display: none;
  }

  .showItem {
      display: block;
  }

const loading = document.querySelector('.loading');

function randomQuote (){

    quote.innerHTML = '';
    author.innerHTML = '';
    loading.classList.add('showItem');

    setTimeout(() => {

    //get a random number to pick a random quote object
    random = Math.floor(Math.random() * quoteArray.length);
    //get that random quote's content
    quote.innerHTML = quoteArray[random].content;
    //get that random quote's author
    author.innerHTML = '— ' + quoteArray[random].author;

    //Tweet that new generated quote
    tweetQuote();

    loading.classList.remove('showItem');

    }, 2000);

}

A po co tyle tego?

var elemelek=document.getElementById("cytat");
var cytaty=["cytat 1","cytat 2"];
var ilosc=2;
function losujCytat(LISTA,ILOSC){
var n=Math.floor(Math.random()*ILOSC);
return LISTA[n];
}
elemelek.innerHTML=losujCytat(ilosc,cytaty);

HTML:

<p id="cytat" ></p>