document.querySelector is returning null for a very simple beginner problem. I have no idea why [duplicate]

html is basically boiler plate

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="script.js"></script>
  </head>
  <body>
    <input id="text-input" required placeholder="Please input a value" />
    <button id="check-btn"></button>
    <div id="result"></div>
  </body>
</html>

js

const textInput = document.querySelector("input");

console.log(textInput);

returns null. Ive watched youtube videos and do exactly what they did and console will log the input element. Ive also tried using .text-input and #text-input