Random Quote Machine Functionality

JavaScript
1

I’m having difficulty getting my quotes and authors to show up, any advice?

1 Like
2

Chrome Dev Tools: Uncaught ReferenceError: math is not defined

Compare your code with the correct code.

1 Like
3

capitalize math to Math

1 Like
4

Element.innerHTML isn’t a function either.

1 Like
5

So, you need to learn how to read the browser console for errors. Most of the time it is something like ctrl-shft-i or ctrl-shft-j.

But looking at your code, you have another problem. You generate the quote and author random numbers separately? So each random quote will get an unrelated random object? I would suggest having your quote array be an array of objects and each object has a text and an author property. Then you just generate one random number.

You also need a way to generate a new random number each time, but maybe you haven’t gotten there yet.

2 Likes
6

I think I’ve made it appear with it though.

7

I’ve managed to get matching quotes and authors to appear guys, but the button only does this when pressed once. Also, the quote button also moves down when I press it which isn’t supposed to happen.

Thanks for the help so far guys!

8 
const randomNumber = Math.floor(Math.random()*quotes.length);
let randomQuote = quotes[randomNumber];
let randomAuthor = authors[randomNumber];

newQuote.addEventListener("click", () => {
  firstQuote.innerHTML = randomQuote;
  authorInsert.innerHTML = randomAuthor;
});

You assign the randomized quote and author one time.
Then you set the quote and the author over and over again to the same contents.

After fixing the quotes, insert the following code at the bottom of your CSS to find out,
what is happening to your New Quote Button

#quote-box > div {
  border: 2px dashed red;
}
9

You assign the randomized quote and author one time.
Then you set the quote and the author over and over again to the same contents.

^^^ Is that what I am doing or what I should I be doing?

After fixing the quotes, insert the following code at the bottom of your CSS to find out,
what is happening to your New Quote Button

#quote-box > div {
border: 2px dashed red;
}

^^^ OK, so it’s the margin-top that’s making the buttons move down. So they move down according to the above elements when they appear, instead of the parent element. Perhaps I should use bootstrap alignment?