Tengo una pequeña aplicación web de censura de texto en la que estoy trabajando. Cada vez que el .js está en su propio archivo y hago clic en el botón 'censurar texto', aparece un error HTTP 405, pero si coloco el js en la etiqueta HTML, funciona bien. No estoy muy seguro de por qué.
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)No estoy seguro, pero supongo que debes mover tu <script src=""/> al final del cuerpo.
Porque el javascript se carga antes que el propio HTML.
<body> - - - - - <script src="/js/main.js"></script> </body>El error 405 ( method not allowed ) se muestra porque el formulario se envía y utiliza el método de post , pero el servidor web no permite la publicación en archivos html simples.
Los botones de envío envían el formulario porque el detector de eventos no está vinculado correctamente con la función censorWords .
En primer lugar, no necesita un formulario y no necesita un botón de tipo enviar si solo desea activar JavaScript para ejecutar. Elimine el formulario y haga el botón de type=button .
En segundo lugar, antes de que el código JavaScript intente acceder a partes del documento, debe asegurarse de que el documento esté completamente cargado. Consulte $(document).ready equivalente sin jQuery para conocer varias formas de lograrlo. Espere a que el documento se cargue por completo y solo luego ejecute el código para conectar otros eventos. O utilice el atributo defer en la etiqueta del script para aplazar la ejecución del código externo hasta que el documento esté completamente cargado.
El error 405 significa que el método no está permitido
Su código JS no está haciendo ninguna solicitud http, por lo que supongo que cuando tiene el JS en un archivo separado, en realidad no se está ejecutando en absoluto, por lo que cuando presiona el botón, solo está enviando el formulario.
Cuando el JS está en un archivo separado, aún necesita un elemento para incluir su archivo JS en su archivo html