Quote generator - Cannot update html on JavaScript button click

Quote generator - Cannot update html on JavaScript button click
0

#1

I am able to update the HTML using this JavaScript outside the ‘on click’ action, but when I put it inside the ‘on click’ action, it doesn’t work. I know the code is executing the ‘on click’ action, because that’s how I am changing the background color.

Any help would be appreciated!

(Code is executing Test1, Test2, Test3 text, but not Test4 text)


#2

You currently have two errors showing in the console that you need to fix. If you are using Chrome press Ctrl+Shft+I to see the console.


#3

It’s not working 'cause you have an error that is preventing the script execution to reach that part of the code. Check your console!

Edit: Too late. @rmdawson71 beat me to it.


#4

So, for some reason it didn’t like this:

document.body.style.backgroundColor=color; //color is a hex string
document.html.style.backgroundColor=color;

I replaced it with this, and it fixed the error and works the same, but now the function continues on as expected:

$('body').css('background', color);
$('html').css('background', color);

I don’t understand why, but it works…


#5

The first line was fine. It didn’t like it 'cause there’s no such thing as document.html. To target the html element in Javascript it should be document.documentElement.

Aside from that, since you’re giving a 100% height to the body and html, you don’t really need to change the html background-color; doing it to the body will be enough.

Lastly, when using jQuery, if you want to change the same property on different elements, you can group your selectors like:

$('element1, element2, element3 ...').method( // etc );