Actualmente estoy trabajando para aprender diferentes características de Javascript. Estoy trabajando con preventDefault. Estaba intentando practicar en el sitio web que estoy creando, pero aún se está actualizando la página. ¿Qué estoy haciendo mal?
Este es mi código:
formSubmit.addEventListener('click', function(event) { event.preventDefault(); }); <form role="form"> <label for="fname" class="labelI">First Name:</label> <br> <input type="text" name="fName" id="fname" required> <br> <label for="lName" class="labelI"></label>Last Name:</label> <br> <input type="text" name="lName" id="lName" required> <br> <label for="emailA" class="labelI"></label>Email Address:</label> <br> <input type="email" name="Email" id="emailA" required><br> <label for="password" class="labelI"></label>Password</label> <br> <input type="password" name="password" id="password" minlength="5" maxlength="12"> <br> <input type="submit" value="Submit" class="but" id="formSubmit"> <input type="reset" value="Clear" class="but"> </form>defer <script> justo antes de la etiqueta de cierre </body> .window inmediatas para sus selectores de ID. Incluso si esto podría funcionar por razones históricas, siempre cree una referencia variable a sus elementos DOM usando los métodos querySelector() o querySelectorAll()"click" cuando realmente desee escuchar un evento "submit" en el FORMULARIO mismo. Esto también permitirá que el navegador active los atributos de tipo de entrada como pattern required , etc. <body> <form role="form" id="myForm"> <label for="fname" class="labelI">First Name:</label> <br> <input type="text" name="fName" id="fname" required> <br> <label for="lName" class="labelI"></label>Last Name:</label> <br> <input type="text" name="lName" id="lName" required> <br> <label for="emailA" class="labelI"></label>Email Address:</label> <br> <input type="email" name="Email" id="emailA" required><br> <label for="password" class="labelI"></label>Password</label> <br> <input type="password" name="password" id="password" minlength="5" maxlength="12"> <br> <input type="submit" value="Submit" class="but" id="formSubmit"> <input type="reset" value="Clear" class="but"> </form> <!-- Place all your <script>s right BEFORE the closing BODY tag --> <script> const EL_myForm = document.querySelector("#myForm"); EL_myForm.addEventListener("submit", function (event) { event.preventDefault(); // prevent default browser SUBMIT action console.log("Form not submitted yet. Do your JS magic here!"); }); </script> </body>formSubmit no es una variable. Debe tomar una referencia a un elemento.
document.getElementById('formSubmit').addEventListener('click', function (event) { event.preventDefault(); });Debe seleccionar el botón con id formSubmit .
var sel = document.getElementById("formSubmit"); sel.addEventListener('click',function(e){ e.preventDefault(); });No puede agregar un detector de eventos directamente a la identificación 'formSubmit'