Quiero usar javascript en una vista de maquinilla de afeitar en el proyecto MVC. Quiero mostrar un mensaje al usuario haciendo clic en el botón de publicación. Puse la etiqueta del script en la Section debajo de la página, pero al presionar F12 muestra que 'btn' is null . Estoy probando mi proyecto en IISExpress en Firefox
<form method="post"> --------a few input fields in a form------- <button id="button" type="submit" class="btn btn-lg btn-success">send</button> </form> <div class="submit-progress d-none"> <label>be patient please...</label> </div> @section scripts{ <partial name="_ValidationScriptsPartial" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.2.7/js/fileinput.min.js"></script> <script type="text/javascript"> $(document).ready(function () { const btn = document.getElementById("#button"); btn.addEventListener("click", function () { $(btn).prop("disabled", true); $(".submit-progress").removeClass("d-none"); }) }); </script> }Al usar getElementById, solo necesita pasar el nombre, no el selector #
const btn = document.getElementById("button");Ha utilizado la sección de scripts correctamente.
Hay varios problemas con su código, principalmente por mezclar jQuery y métodos nativos de JavaScript. Puede hacer que funcione arreglando las 3 líneas que se muestran para usar jQuery. Tenga en cuenta que "esto" se refiere al elemento al que se adjunta el controlador de eventos, en este caso, el botón.
$(document).ready(function() { // const btn = document.getElementById("#button"); <-- REMOVE $("#button").click(function() { // <-- CHANGE $(this).prop("disabled", true); // <-- CHANGE $(".submit-progress").removeClass("d-none"); }) });