【发布时间】：2021-08-08 17:12:08
【问题描述】：
这是我从这里的教程中下载的代码：(https://codepen.io/Web_Cifar/pen/PoNNEYY)，希望能将其调整到我正在做的事情上。我把它拼凑在一起，虽然它在演示中有效（并且有一个很好的 YT 视频，他通过它），但在现场情况下它对我不起作用。我正在尝试构建一个类似于 Gravity Forms 的多页数据输入表单（GF 有一些对我不起作用的怪癖）。
我得到的第一个 Javascript 错误是：“未捕获的 TypeError：无法读取属性 'addEventListener' of null”。在 StackO 上进行研究时，我得到的一般建议是，可能还没有为我的文档加载 DOM，我们在此之前调用了 JS，两个建议似乎很受欢迎： 1）。将您的 JS 文件移动到 HTML 文档的底部，就在您的 body 标签关闭之前（它最初在我的标签中......移动它没有任何改变）。 2. 将您的 JS 函数包装在以下代码中：“window.addEventListener('DOMContentLoaded', (event) => {" 在调用函数之前强制加载 DOM。
执行 #2 将错误更改为：ReferenceError: "changeStep" is not defined。 JS 代码中有一个名为“changeStep”的函数。如果你参考上面的教程，你会发现它最初是在 JS 文件中定义的最后一个函数，所以我认为将它移到顶部会改变它。没有骰子。我已经做了一些检查，看看一些简单的 JQuery 测试是否在我的环境中工作并且它们确实有效。我对 JS 比较陌生，但我不明白为什么 DOM 不会被加载，也不明白为什么不能引用有问题的函数。
这是我的 HTML 代码的骨架：
<html>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script> /* A recommended test to see if jQuery is working, and it is. */
$(document).ready(function(){
$("button").click(function(){
alert("jQuery is working perfectly.");
});
});
</script>
<link rel="stylesheet" href="/Users/Me/Documents/multistep.css">
<body>
etc.....(moving to end of html file....)
<script type = "text/javascript" src = "/Users/Me/Documents/multistep.js" ></script>
</body>
</html>
这是我的整个 JS 脚本：
const steps = Array.from(document.querySelectorAll("form .step"));
const nextBtn = document.querySelectorAll("form .next-btn");
const prevBtn = document.querySelectorAll("form .previous-btn");
const form = document.querySelector("form");
window.addEventListener('DOMContentLoaded', (event) => {
function changeStep(btn) {
let index = 0;
const active = document.querySelector(".active");
index = steps.indexOf(active);
steps[index].classList.remove("active");
if (btn === "next") {
index++;
} else if (btn === "prev") {
index--;
}
steps[index].classList.add("active");
}
});
window.addEventListener('DOMContentLoaded', (event) => {
nextBtn.forEach((button) => {
button.addEventListener("click", () => {
changeStep("next");
});
});
});
window.addEventListener('DOMContentLoaded', (event) => {
prevBtn.forEach((button) => {
button.addEventListener("click", () => {
changeStep("prev");
});
});
});
window.addEventListener('DOMContentLoaded', (event) => {
form.addEventListener("submit", (e) => {
e.preventDefault();
const inputs = [];
form.querySelectorAll("input").forEach((input) => {
const { name, value } = input;
inputs.push({ name, value });
});
console.log(inputs);
form.reset();
});
});
请注意，我基本上将所有内容都包装在“window.addEventListener ...”标签中（根据上面的 Google 建议），我从引用的演示（在 codePen 中工作）中所做的唯一其他更改是移动 changeStep函数到文件中的第一个函数。
我不知道发生了什么。有经验的 JS 人能帮我摆脱困境吗？
【问题讨论】：
-
我想我会补充说错误发生在这里： nextBtn.forEach((button) => { button.addEventListener("click", () => { changeStep("next");
标签： javascript html jquery