Javascript 无法读取属性addeventlistener

我有两个单独的文件。一个

html

和一个

js

文件。我得到以下错误：

（索引）：118未捕获的TypeError:无法读取null的属性“addEventListener”

资源

---

html

<form><input id="product1" name="product1" type="checkbox" value="12" />
<input id="product1" name="product1" type="checkbox" value="13" />
<input id="product1" name="product1" type="checkbox" value="14" />
<button type="submit">Subscribe</button></form>

---

这是因为当JS已经在执行时，您的HTML没有被加载。在HTML之后包含javascript，它将正常工作（在

之前）

它似乎正常工作，请参见小提琴：

const form = document.querySelector('form');

form.addEventListener('submit', e => {
  e.preventDefault();

  const values = Array.from(document.querySelectorAll('input[type=checkbox]:checked'))
    .map(item => item.value)
    .join(',');

  console.log(`test.com/addtocart?${values}`);
});