Your div element that is the target is empty – not even blank space. Adding some content seems to work fine: https://jsfiddle.net/0fkyp5nj/

HTML:

 <div class="upper_bar">
        <div></div>
        <div class="stats_bar">{{ stage1_total }} recibidos, {{ stage2_total }} en preparación, {{ stage3_total }} en camino y {{ stage4_total }} entregados</div>
        <div id="createButton" onclick="myFunction()"><i class="fas fa-plus-circle" style="font-size:48px;"></i>test 123</div>
    </div>

JavaScript:

function myFunction()
{
    alert('Function...');
}

I have a Django project in which I have this HTML code in my template:

    <div class="upper_bar">
        <div></div>
        <div class="stats_bar">{{ stage1_total }} recibidos, {{ stage2_total }} en preparación, {{ stage3_total }} en camino y {{ stage4_total }} entregados</div>
        <div id="createButton" onclick="myFunction()"><i class="fas fa-plus-circle" style="font-size:48px;"></i></div>
    </div>

In my scripts tag, I have this:

function myFunction()
{
    alert('Function...');
}

I previously had this code instead in my scripts:

document.getElementById('createButton').addEventListener('click',
    function()
    {
        alert('message...');
        document.querySelector('.bg-modal').style.display = 'flex';
    }
);

But it didn’t work either. Does someone know why is the div called ‘createButton’ not working? I don’t want to use a button since I’d like to only see the icon, or is there another way to just see the icon in a way that works and calls the function?