0

Whenever I type into the <input /> element of my HTML, everything disappears. I din't see any problem or error on my JavaScript console, and when I inspect the page, the code seems to disappear as well. Code:

<!DOCTYPE html>
<html>
<head>
<title>My Coding stuff</title>
</head>
<body>

<input type="text" id="myInput" onkeydown="write()" />
<p id="myDiv" style="width: window.innerWidth;" style="color: green;"></p>

<script>
function write() {
  document.getElementById("myDiv").innerHTML += Math.floor(Math.random()*2) + " ";
  document.getElementById("myInput").value = "";
}
</script>

</body>
</html>

Does anyone know why this is happening? Thanks

villager1
  • 80
  • 1
  • 10
  • 4
    If you’re using event attributes like `onkeydown`, you can’t use `write` as a function name, because it refers to `document.write` which overwrites everything when called after the DOM has loaded. Use [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) instead. See [MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don't_use_these). – Sebastian Simon Jan 17 '19 at 22:33
  • ok thanks i didn't think about that... but then wouldn't it have written down at least a number between 0 and 1? Because of `innerHTML += Math.floor(Math.random()*2) +` – villager1 Jan 17 '19 at 22:35
  • 2
    No, your `write` function is never called. `document.write` with no arguments is called instead. – Sebastian Simon Jan 17 '19 at 22:37
  • 1
    If you keep using event attributes like `onkeydown` you can’t name your functions freely. `write` is one of the _many_ names you need to avoid. – Sebastian Simon Jan 17 '19 at 22:38
  • It’s basically the same as [Uncaught TypeError: links is not a function at HTMLButtonElement.onclick](https://stackoverflow.com/q/52796597/4642212); exactly the same reason and explanation, but different outcome. – Sebastian Simon Jan 17 '19 at 22:47
  • but for that other problem, the js console shows an error saying "Uncaught TypeError: links is not a function at HTMLButtonElement.onclick (myscript.html:1)". This just stopped working for no reason. – villager1 Jan 17 '19 at 22:53
  • What stopped working for no reason? The `links` code? `document.links` _isn’t_ a function. The error message is correct. `document.write` _is_ a function. No error here. – Sebastian Simon Jan 17 '19 at 22:55
  • Here’s another one: [Why Can't I Use JS Function Called 'evaluate' in HTML?](https://stackoverflow.com/q/14755468/4642212). – Sebastian Simon Jan 17 '19 at 22:58
  • [Document.Links - W3Schools](https://www.w3schools.com/jsref/coll_doc_links.asp) – villager1 Jan 17 '19 at 23:01
  • Possible duplicate of [Is "clear" a reserved word in Javascript?](https://stackoverflow.com/questions/7165570/is-clear-a-reserved-word-in-javascript). This seems to be the “canonical” question for this problem. Just mentally replace every `clear` with `write`. Exactly the same reasoning applies. – Sebastian Simon Jan 17 '19 at 23:09

0 Answers0