Cannot read property addeventlistener

Question

I have 2 separate files. A html and a js file. I get the following error:

(index):118 Uncaught TypeError: Cannot read property 'addEventListener' of null

Resources

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

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}`);
});

it seems to work correctly , see the fiddle : https://jsfiddle.net/dfr0mg62/ — Hyyan Abo Fakher, May 04 '18 at 13:12

score 2 · Accepted Answer · answered May 04 '18 at 13:13

2

Thats because your HTML is not loaded when the JS is executing already. Include your javascript after your HTML and it will work (before </body>)

answered May 04 '18 at 13:13

Xatenev

6,240
3
15
41

Cannot read property addeventlistener

1 Answers1