渲染 Dash 应用程序 Python 后加载 javascript

Question

我正在用 Dash plotly 做一个投资组合，

所以，我使用了很多 sass 和 js 来制作漂亮的东西。

但我有一个问题。

在我的 assets/script.js 上有

const menuIcon = document.querySelector('#menu-icon');
const navbar = document.querySelector('.navbar');

console.log(menuIcon);
console.log(navbar);

menuIcon.onclick = () => {
    menuIcon.classList.toggle('bx-x');
    navbar.classList.toggle('active');
};

并得到这个错误：

null
null
sripts.js:12 Uncaught TypeError: Cannot set properties of null (setting 'onclick')
    at scripts.js:12:18

如果我设置一个定时器，工作正常：

*==== toggle navbar icon =====*/
setTimeout(() => {

    const menuIcon = document.querySelector('#menu-icon');
    const navbar = document.querySelector('.navbar');

    console.log(menuIcon);
    console.log(navbar);

    menuIcon.onclick = () => {
        menuIcon.classList.toggle('bx-x');
        navbar.classList.toggle('active');
    };
}, 1000); 

日志：

<i id="menu-icon" class="bx bx-menu"></i>
<nav class="navbar"><a class="active" href="#home">Home</a><a href="#about">About</a><a href="#services">Services</a><a hre

我认为如果因为 js 首先加载 dash 应用程序，这将导致无法识别任何变量

那么，我必须做什么？

Answer 1

你应该使用 DOMContentLoaded 事件：

document.addEventListener('DOMContentLoaded', () => {
  const menuIcon = document.querySelector('#menu-icon');
  const navbar = document.querySelector('.navbar');

  console.log(menuIcon);
  console.log(navbar);

  menuIcon.onclick = () => {
    menuIcon.classList.toggle('bx-x');
    navbar.classList.toggle('active');
  };
});