ReferenceError: Can't find variable X when calling JS function (or variable) from HTML file

I am trying to call a function in an external JavaScript file from an HTML-file. The goal is to work with the content of a form there.

I tried so many things and always got the Error "ReferenceError: Can't find variable: X"

The positioning of the jquery javascript file loading
The positioning of the <script src="XXX"> call
Calling the function from the button "onclick" or the form "onsubmit"
Trying to call the javascript file from an embedded script in the HTML

This is what my JavaScript file and my HTML looks like right now:

function submit(e) {

  answerText = document.getElementById("text").value;
  // Do something with it.

}

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
  <form id="validation-form" onsubmit="return submit(e)">
    <input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
    <button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
  </form>
</body>

I also tried

function doSomething() {

  // Do something

}

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
  <script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>
<body>
  <form id="validation-form" onsubmit="return submit(e)">
    <input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
    <button type="button" class="btn btn-primary" onclick="submit(e)">Send</button>
  </form>
  <script>
    function submit(e) {
      doSomething();
    }
  </script>
</body>

In both cases, it returned the same error over and over again: "ReferenceError: Can't find variable: X". In the first example, X being "submit" and in the second "doSomething".

All help is very welcome. I know there are similar headlines here, but non of the solutions did anything for me.

Solution

Hey so when I ran the code without the e as a parameter for the submit function in the html it didn't give me the error. I think it may be because the e is the place holder for the text of the submit function in this case. Hope this helps.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="/scripts/debug_alerts.js" type="text/javascript"></script>
</head>

<body>
    <form id="validation-form" onsubmit="return submit(e)">
        <input type="text" class="form-control" name="text" id="text" placeholder="Text" required>
        <button type="button" class="btn btn-primary" onclick="submit()">Send</button>
    </form>
    <script type="text/javascript">
        function submit(e) {

            answerText = document.getElementById("text").value;
            // Do something with it.


        }
    </script>
</body>

</html>