时间戳

首页 > 解决方案 > 为什么这个 div 不触发分配的 onclick() 函数？

javascript - 为什么这个 div 不触发分配的 onclick() 函数？

问题描述

我有一个 Django 项目，其中我的模板中有这个 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></div>
    </div>

在我的脚本标签中，我有这个：

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

我以前在我的脚本中有这个代码：

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

但它也没有奏效。有人知道为什么名为“createButton”的 div 不起作用吗？我不想使用按钮，因为我只想看到图标，还是有另一种方法可以以一种有效的方式查看图标并调用该函数？

标签： javascripthtmldjango

解决方案

作为目标的 div 元素是空的 - 甚至不是空格。添加一些内容似乎工作正常：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...');
}

推荐阅读