Question

我有这个Html代码，但是当我尝试在浏览器控制台中执行时，我收到错误

elementWithHiddenContent为null

我的Html代码是：

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
<!-- <style>
input.password-input {
-webkit-text-security: disc;
}
</style>-->
<script>
var currentInnerHtml;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;

element.__defineGetter__("id", function() {
currentInnerHtml = "";
});

setInterval(function() {
currentInnerHtml = innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentInnerHtml;
}, 1000);
</script>
</head> 

<body> 
<div id="element-to-hide"> 
Enter UserName <input name="user" type="text"><br> 
Enter Password <input class="password-input" name="pass" type="password"> 
</div>

</body>
</html>

任何帮助？

Answer 1

尝试将脚本移动到正文的底部。脚本执行时该元素不存在。

Answer 2

我认为问题是当你运行scriopt时没有加载dom。将您的代码放在一个函数中并将其加载到body load上，这样您就可以确保所有的html都已呈现：

<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ControlShiftI Example</title>
<!-- <style>
input.password-input {
-webkit-text-security: disc;
}
</style>-->
<script>
function bodyOnLoad() {
var currentInnerHtml;
var element = new Image();
var elementWithHiddenContent = document.querySelector("#element-to-hide");
var innerHtml = elementWithHiddenContent.innerHTML;

element.__defineGetter__("id", function() {
currentInnerHtml = "";
});

setInterval(function() {
currentInnerHtml = innerHtml;
console.log(element);
console.clear();
elementWithHiddenContent.innerHTML = currentInnerHtml;
}, 1000);
}
</script>
</head> 

<body onload="bodyOnLoad()"> 
<div id="element-to-hide"> 
Enter UserName <input name="user" type="text"><br> 
Enter Password <input class="password-input" name="pass" type="password"> 
</div>

</body>
</html>

为什么我的变量显示为null？

2 个答案: