Random HTML Paragraph Color on Click

Written by @kerixa 1 March 2021

If you want to make your site more attractive, you can use simple effects! For example you can change the paragraphs color on click. This helps the users not to be bored. With the following code example, the paragraphs colors change on each click.

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlfreecode.com coded by: Kerixa Inc. -->
<style>
#myColorfulParagraph {
    font-size: 30px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>
<div class="container">
<p id="myColorfulParagraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis enim quis eros rutrum, eu bibendum magna pulvinar. Phasellus pulvinar consectetur enim nec sagittis. Maecenas accumsan placerat erat ac tempor. Vivamus ut neque magna. Vestibulum
    accumsan nunc non luctus laoreet. Vivamus eget scelerisque enim, sed posuere tortor. 
</p>
</div>
<h1>Click on the paragraph for random color.</h1>
<script>
document.addEventListener("DOMContentLoaded", theParagraph);
function theParagraph() {
    var div = document.getElementById('myColorfulParagraph');
    div.addEventListener("click", multicolorChange);
    document.body.appendChild(div);
}

function multicolorChange(z) {
    var change = z.target;
    change.style.color = '#' + Math.random().toString(16).substr(-6);
}
</script>
<a target='_blank' href='https://www.htmlfreecode.com' style='font-size: 8pt; text-decoration: none'>Html Free Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300