HTTP Error 405 when JS is in its own file, but not when in HTML-CodePudding

I have a small text censor web app im working on. Whenever the .js is in its own file and I click the 'censor text' button, I get a HTTP error 405, but if i put the js in the HTML tag, it works fine.Not too sure why.

HTML:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document Censor</title>
    <script src="/js/main.js"></script>
</head>

<body>
    <h1>Text Censor</h1>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum enim reiciendis recusandae aliquid delectus
        consectetur nobis. Sunt exercitationem iure dolores provident obcaecati aliquam totam. Molestiae cumque ducimus
        aliquid. Deserunt, provident.</p>
    <form name="redacted" method="post" action="">
        <textarea id="input" name="text" rows="10" cols="60">
        </textarea>
        <br />
        <input id="formSub" type="submit" value="Censor Text" />
    </form>
</body>
</html>

JS:

var div = document.getElementById('formSub');

function censorWords(event) {
   event.preventDefault();
   var textContent = document.getElementById('input');
   var redacted = ["boston", "red", "sox"];
   console.log(textContent.value)
   textContent.value = censored(textContent.value, redacted);
}

function censored(string, filters) {
   console.log('in')
   // "i" ignores case, "g" for global and "|" for OR match
   var regexp = new RegExp(filters.join("|"), "gi");
   return string.replace(regexp, function (match) {
       //this is where the words are replaced with X
       var censorship = '';
       for (var i = 0; i < match.length; i  ) {
           censorship  = 'x';
       }
       return censorship
   })
}

div.addEventListener('click', censorWords)

CodePudding user response：

I am not sure, but my guess is you need to move your <script src=""/> to the end of the body.

Because the javascript is being loaded before the HTML itself.

<body>
-
-
-
-
-
<script src="/js/main.js"></script>
</body>

CodePudding user response：

The error 405 (method not allowed) is shown because the form is submitted and uses the post method but the web server doesn't allow posting to simple html files.

The submit buttons submits the form because the event listener is not correctly linked up with the censorWords function.

First of all, you don't need a form and you don't need a button of type submit if you only want to trigger some JavaScript to execute. Remove the form and make the button of type=button.

Second, before the javascript code tries to access parts of the document, you should make sure the the document is fully loaded. See $(document).ready equivalent without jQuery for several ways how to achieve that. Either wait for docment to be loaded completely and only then execute code to hook up other events. Or use the defer attribute on the script tag to defer execution of the external code until the document is fully loaded.

CodePudding user response：

405 error means Method Not Allowed

Your JS code isnt making any http requests, so my guess is that when you have the JS in a separate file, it is not actually being run at all, so when you press the button, it is just submitting the form

When the JS is in a separate file you still need a element to include your JS file in your html file