índice.html
<!DOCTYPE html> <html> <head> <script src="main.js"></script> </head> <body> <div> <input id="LinkInput" type="text"> <button id="Add">Add Link</button> </div> </body> </html>principal.js
document.addEventListener("DOMContentLoaded", (event) => { document.getElementById("Add").addEventListener("click", addLink); }); var addLink = function () { let link = document.getElementById("LinkInput").value; console.log("link is " + link); }Pegue un enlace en el elemento de entrada y luego haga clic en el botón. Lo siguiente se imprime en la consola.
link is null Si, en cambio, console.log el retorno de 'document.getElementById("LinkInput")', esto se devuelve:
<input id="LinkInput" type="text">Se está utilizando Browser-Sync versión 2.27.7 para servir los archivos. El comando CLI utilizado fue:
browser-sync start --server --directory --files "*/**" Según este ejemplo de w3schools js , .value debería devolver el valor escrito en <input> en lugar de nulo. ¿Por qué no?
El problema se origina con la sincronización del navegador, no con el código o el navegador.
Correr
npm update browser-syncy luego inténtalo de nuevo.