使用 eventpreventDefault 获取无法设置属性“innerHTML”为空答案

【问题标题】：using eventpreventDefault getting Cannot set property 'innerHTML' of null使用 eventpreventDefault 获取无法设置属性“innerHTML”为空
【发布时间】：2020-11-16 23:30:00
【问题描述】：

我是 javascript 的初学者，正在努力学习。在这里我有简单的输入，用户应该在其中写一些东西，如果用户写了一些东西，它将打印出来，如果用户不写任何东西，它应该说“请写点东西。”。为了做到这一点，我想使用非运算符（！）。知道为什么我会收到此错误：Uncaught TypeError: Cannot set property 'innerHTML' of null at myFunction at HTMLFormElement.onsubmit

这是我的代码：

<!DOCTYPE html>
<html>

<body>

  <form onsubmit="myFunction(event)">
    <input type="text" id="text">
  </form>

 <div id="demo"></div>

  <script>
    var arvo = document.getElementById("text").value

    if (!arvo) {
      function myFunction(arvo) {
        event.preventDefault();
        document.getElementById(demo).innerHTML = "text you typed: " + arvo;

      }
    } else {
      function myFunction(arvo) {
        event.preventDefault();

        document.getElementById(demo).innerHTML = "Please write something";

      }
    }
    console.log(arvo)
  </script>

</body>

</html>

【问题讨论】：

对于未来的问题 -> How does the snippet editor work
与问题无关，但您通常应该使用单独的 javscript 文件而不是使用脚本标签，因为它使您的项目更有条理

标签： javascript html if-statement innerhtml getelementbyid

【解决方案1】：

当您重新加载页面时，JavaScript 代码会立即执行。此外，如果您在 if 块中创建函数，则只能在此处访问它。并且没有定义变量event。

你必须在函数中调用if-else。

解决方案：

<!DOCTYPE html>
<html>
<body>

<form id="form">
<input  type="text" id="text" >
</form>

<p id="demo"></p>

<script>
function myFunction(event) {
event.preventDefault();
var text = document.getElementById('text').value; //get the value
if (text) document.getElementById('demo').innerHTML = "Text typed: " + text; // if the text is something
else document.getElementById('demo').innerHTML = "Please type something"; // if nothing
console.log(text);
}
document.getElementById('form').addEventListener('submit', myFunction); //run the function when it's submitted. Event listeners are perfect for this
</script>

</body>
</html>

希望这有帮助！

【讨论】：