Fade In random quote's from array

Question

I need to get quotes to Fade In when clicking on the Get Quotes button. I am very new to JS and CSS and feel relatively lost. I also want to do this not using Jquery.

var quoteText = document.querySelector("h2");
var authorText = document.querySelector("h3")
var button = document.querySelector("button");
var body = document.querySelector("body");

button.addEventListener("click", function(){

    var colorRandom = Math.floor(Math.random()*255)
    var random = Math.floor(Math.random()*quotes.length)    
    quoteText.textContent = quotes[random];
    authorText.textContent = "- " + authors[random];
})

Welcome to Stack Overflow! Please post the relevant HTML as well. Please read: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) — disinfor, Jun 21 '19 at 20:43

score 0 · Answer 1 · answered Jun 21 '19 at 20:54

First, if you want to get all (more than one) quotes you have to use querySelectorAll(), because they querySelector() method returns the first element. When you get all elements you can return random index in range of nodeList.length. This is very simple example in https://codepen.io/iganchev87/pen/vqxjNm . If you want you can add in function with event listener and so on. I hope it will help you.

var allQuotes = document.querySelectorAll("h2");
var randomIndex = Math.floor(Math.random()*(allQuotes.length));
console.log(allQuotes[randomIndex].textContent);

Fade In random quote's from array

1 Answers1