Actualmente estoy tratando de hacer un programa en el que ingresas un enlace en un formulario HTML y cuando haces clic en un botón te envía a ese enlace. Sin embargo, cuando hago clic en el botón, la página simplemente borra el formulario. Soy un nativo de Python y un novato en HTML/JS, por lo que la forma en que estoy estructurando mi código puede ser la razón:
<form> <input type="url" id="link" placeholder="Enter link of website:" required> <br> <button class="outline" id="open">Create gate</button> </form> <script type="text/javascript"> document.getElementById("open").onclick = () => location.assign(String(document.getElementById("link").value)); </script> </form>Ya que estás usando un formulario. Tu botón
<button class="outline" id="open">Create gate</button> actúa como el botón de envío del formulario y, por lo tanto, actualiza la página antes de ejecutar el método location.assign() . Hay muchas maneras de arreglar esto.
Una forma simple es decirle exclusivamente al navegador que este botón no es el botón de enviar, podemos hacerlo usando el atributo type="button" en nuestro botón.
Crear puerta
Puede usar e.preventDefault() en el envío de su formulario para dejar de actualizar la página.
Pruebe el siguiente código:
<!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>Location Object</title> </head> <body> <form> <input type="url" id="link" placeholder="Enter link of website:" required> <br> <button class="outline" id="open">Create gate</button> </form> <script type="text/javascript"> document.getElementById("open").addEventListener('click', (e) => { e.preventDefault(); location.assign(String(document.getElementById("link").value)); }); </script> </form> </body> </html>Su código, exactamente como se proporciona, pegado en una plantilla repetitiva HTML5 mínima, funciona en el editor de código Textastic y en Safari ejecutándose en localhost.
Tal vez algún otro JavaScript en la vecindad de su detector de eventos esté rompiendo la función de flecha. ¿Quizás poner entre paréntesis la declaración de una función podría ayudar?