<body>
    <h1>Events & The Keyword This</h1>

    <h3>Click The Buttons!</h3>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>
    <button>Click</button>

    <h3>Click The Paragraphs!</h3>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, modi a? Necessitatibus quae dignissimos molestias voluptatem quidem blanditiis vitae excepturi temporibus nemo ex culpa, tenetur eligendi earum minima reprehenderit incidunt.
        Vero ullam quos dolor rerum voluptate quo dolore adipisci nemo deserunt animi. Iusto ex exercitationem labore tempore dolorum distinctio quidem rerum nulla perferendis inventore, eum ducimus illo ipsum ratione quo.
        Molestiae similique consequatur vitae cumque, laudantium repellat, provident asperiores assumenda cum quisquam tempore non fugiat, voluptates laborum aliquid sequi unde vero saepe reiciendis dignissimos commodi? Totam necessitatibus vel et culpa!
    </p>

    <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quod similique deserunt animi magni nemo eaque nesciunt nulla, ipsam nisi reprehenderit temporibus dicta quae inventore veniam error enim, explicabo eligendi omnis.
        Natus, unde. Impedit molestias repellat, eveniet, laborum sint culpa numquam velit officiis fuga ad necessitatibus. In fugiat sequi molestiae repudiandae exercitationem error, veritatis corrupti ipsum nihil enim tempora porro nemo?
    </p>

    <style>
        button {
            width: 100px;
            height: 100px;
            margin: 20px;
        }
    </style>


    <script src="app.js"></script>
</body>
const randomRGBColor = () => {
    const r = Math.floor(Math.random() * 255);
    const g = Math.floor(Math.random() * 255);
    const b = Math.floor(Math.random() * 255);
    return `rgb(${r}, ${g}, ${b})`;
}

//This is a callback function that gets called by the addEventListener handeler
function colorize(){
    this.style.backgroundColor = randomRGBColor();
    this.style.color = randomRGBColor();
}

const buttons = document.querySelectorAll('button');
for(let button of buttons){
    button.addEventListener('click', colorize)
}

const paragraphs = document.querySelectorAll('p');
for(let paragraph of paragraphs){
    paragraph.addEventListener('click', colorize)
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.