使用 eventpreventDefault 获取无法设置属性“innerHTML”为空
Posted
技术标签:
【中文标题】使用 eventpreventDefault 获取无法设置属性“innerHTML”为空【英文标题】：using eventpreventDefault getting Cannot set property 'innerHTML' of null 【发布时间】：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 文件而不是使用脚本标签，因为它使您的项目更有条理 【参考方案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>希望这有帮助！
【讨论】：
以上是关于使用 eventpreventDefault 获取无法设置属性“innerHTML”为空的主要内容，如果未能解决你的问题，请参考以下文章
iframe简单使用 获取iframe 获取iframe 元素值 iframe获取父页面的信息