Trying to run a function when the element is clicked in HTML

I have attached my HTML code below – and my goal is to make the myfunction() run when the element is clicked. Currently, I have the onclick event set, but the function is not running when I click the element.

<style>
.tag14 span {
    padding: 6px 10px;
    background: #D0E8E4;
    border-radius: 20px;
    color: #091747;
    font-family: Roboto;
    font-size: 14px;
    margin: 0 4px 8px 0;
    font-weight: 500;
    display: inline-block;
    word-wrap: break-word;
    white-space: normal;
}

.tag14 span:hover{
background:red;
}

.tag14 span:focus{
background:green;
}
</style>

<script>
function myFunction() {
alert('hi');
}
</script>

<div class="tag14" onclick="myfunction();"><span>Hello World</div>```

Leave a Comment