index.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>
main.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);
}
Paste a link into the input element and then click the button. The following is printed to the console.
link is null
If I instead console.log the return of 'document.getElementById("LinkInput")', this is returned:
<input id="LinkInput" type="text">
Browser-Sync version 2.27.7 is being used to serve the files. The CLI command used was:
browser-sync start --server --directory --files "*/**"
Based on this w3schools js example, .value should return the value typed into the <input> instead of null. Why does it not?
The problem originates with browser-sync, not the code or the browser.
Run
npm update browser-sync
and then try again.