Why does my Javascript work in the script tag but not from an external file? [closed]

<script>
    const userin = document.getElementById('todoAdd');
    const Addbtn = document.getElementById('Addbtn');
    const out1 = document.getElementById('outTodo');
    function addToP(){
        out1.innerHTML=userin.value;
    }
    Addbtn.addEventListener('click',addToP);
</script>

^ this works (puts textbox input into paragraph

<script src="index.js"></script>

^ this doesn’t work even though I have the same script in the js file and it is in the same folder as the html

this is the html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do list</title>
    <link href="index.css" rel="stylesheet">
</head>
<body>
    <header>
        To-Do list
    </header>
    
    <input type="text" id="todoAdd">
    <input type="button" id="Addbtn" value = "Add">
    <p class="output" id="outTodo"></p>
    <script src="index.js"></script>
</body>
</html>

I was trying to put the js in the separate folder and run it the same but it somehow didn’t work the same as the other method