Why does this work?

Why does the event listener at the bottom of my JS file work?
I’m not using document.getElementById(‘container’).addEventListener but it still works for some reason…
I’ve tried this again on another project and it does not work.

Hi, so it seems that in your html file you used a dash instead of an equal sign to define your div id’s. It’s quite small on the screen, so just try to check that. It might be the main reason.

there equal signs. I dont know how to properly import the files to the comment section but I will give it a try.
I’m thinking the id of container is so common maybe JS has it built in?

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">

<script src="main.js" defer></script>

<div id="container">

    <input type="text" id="box1" class="box" onclick="func()" readonly>

    <input type="text" id="box2" class="box" onclick="func2()" readonly>

    <input type="text" id="box3" class="box" onclick="func3()" readonly>

    <input type="text" id="box4" class="box" onclick="func4()" readonly>

    <input type="text" id="box5" class="box" onclick="func5()" readonly>

    <input type="text" id="box6" class="box" onclick="func6()" readonly>

    <input type="text" id="box7" class="box" onclick="func7()" readonly>

    <input type="text" id="box8" class="box" onclick="func8()" readonly>

    <input type="text" id="box9" class="box" onclick="func9()" readonly>


<div id="winBox">

    <h1 id="win"></h1><br>

    <h1 id="tie"></h1><br>

    <button type="reset" id="button" onclick="window.location.reload()">try again</button>


Sorry, my bad, I could see clearly with the screenshots…