我的函数在我的网站完全加载之前被触发，因此我的filterBar返回NULL。 这是我的 html 项目，我正在尝试将其转换并做出反应。
我的功能
document.addEventListener('DOMContentLoaded', function() {
var filterBar = document.getElementById("filterBar");
var btnFilterSve = document.querySelector('.btnFilterSve');
btnFilterSve.style.backgroundColor = '#7c0001';
btnFilterSve.style.color ='#fff';
filterBar.addEventListener('click', function(event) {
console.log('Clicked element:', event.target);
var selectedFilter = event.target.id;
if (event.target.tagName === 'BUTTON') {
console.log('Button clicked:', event.target);
var cButtons = filterBar.querySelectorAll('button');
cButtons.forEach(function(cButton) {
cButton.style.backgroundColor = '#D9D9D9';
cButton.style.color = '#696969';
});
event.target.style.backgroundColor = '#7c0001';
event.target.style.color = '#fff';
}
});
});
这是我的index.js 文件，我的两个脚本都被延迟 PageSwitch 即使没有延迟也可以工作，但过滤器会在所有内容之前加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Your Title Here</title>
<link rel="stylesheet" href="/assets/src/main/view/MainPageLooks.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inria+Sans:wght@400;700&display=swap" rel="stylesheet">
<script src="/assets/src/main/controller/PageSwitch.js" defer></script>
<script src="/assets/src/main/controller/Filter.js" defer></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
我得到的错误
按钮 btnFilterSve 未找到！
Filter.js：13 未捕获的类型错误：无法读取 null 的属性（读取“addEventListener”） 在 HTML 文档中。 (Filter.js:13:15)
我尝试过 chat.gpt 但它没有帮助，这也是我第一次使用 React，所以复杂的教程没有帮助。
我认为您可能误解了正在发生的事件的顺序。据我所知，这就是正在发生的事情：
一旦 JS 文件加载，浏览器将尝试执行其中包含的代码。您的事件侦听器已添加到此处。当剩余资源解析时，将触发 DOMContentLoaded。根据您报告的错误，这是在 Filter JS 完全执行之前发生的（假设您在 Filter 中有一些代码可以呈现 #filterBar 元素。
这是关键，DOMContentLoaded 不是在等待你的 JS 执行，而是在等待文档 + 资源在页面上加载完成。您将需要一些其他事件来触发您的“附加事件和样式#filterBar”功能。实现此目的的一种简单方法是引入一个超时函数，该函数首先测试 #filterBar 元素是否存在，然后执行“附加事件和样式函数”，如下所示：
function maybeAttachEventsAndStyle() {
const filterBar = document.getElementById("filterBar");
if (!filterBar) {
setTimeout(maybeAttachEventsAndStyle, 500); // wait .5 seconds and try again
return;
}
// attach events and styles
}
// Setup the initial event
document.addEventListener('DOMContentLoaded', maybeAttachEventsAndStyle);
这种方法有效，但您总是会等待比绝对需要的时间更长的时间。更好的方法可能是让每个文件触发一个“就绪”事件，您的主函数可以使用该事件来确定何时准备好对元素进行后处理。