So far you have placed the JavaScript inside the HTML but, as with CSS, that can get cluttered.  Instead you can place the JavaScript in a separate file just like with CSS.  You can also get rid of those nasty event triggers cluttering up your HTML opening tags but that comes later.

Open classes.html and save it as externaljs.html.  Cut (not delete) the whole function out from inside the script element.  Create a new text file and call it main.js.  Make sure the type of the file is correct (no txt on the end).  Paste in the function and save.  Save externaljs.html as well and try it by clicking on the final paragraph.  The function should not work as you have not yet told the browser where it is now.

Change the opening script tag from this:

<script type="text/javascript">

to this:

<script type="text/javascript" src="main.js">

It should now work and your HTML is not cluttered by the JavaScript code.