Javascript 为什么我的变量显示为null？_Javascript_Css_Html_Jquery Ui

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

javascript css html jquery-ui

Javascript 为什么我的变量显示为null？,javascript,css,html,jquery-ui,Javascript,Css,Html,Jquery Ui,我有这个Html代码，但当我试图在浏览器控制台中执行时，我得到了一个错误 elementWithHiddenContent为空我的Html代码是： <html><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ControlShiftI Example</title> <!-- <style> input

我有这个Html代码，但当我试图在浏览器控制台中执行时，我得到了一个错误

elementWithHiddenContent为空

我的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>


ControlShiftI示例
var-currentinerhtml；
var元素=新图像（）；
var elementWithHiddenContent=document.querySelector（“要隐藏的元素”）；
var innerHtml=elementWithHiddenContent.innerHtml；
元素。_;定义器__;（“id”，函数（））{
currentInnerHtml=“”；
});
setInterval（函数（）{
currentInnerHtml=innerHtml；
控制台日志（元素）；
console.clear（）；
elementWithHiddenContent.innerHTML=currentInnerHtml；
}, 1000);
输入用户名

输入密码

有什么帮助吗？

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

我认为问题在于运行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>


ControlShiftI示例
函数bodyOnLoad（）{
var-currentinerhtml；
var元素=新图像（）；
var elementWithHiddenContent=document.querySelector（“要隐藏的元素”）；
var innerHtml=elementWithHiddenContent.innerHtml；
元素。_;定义器__;（“id”，函数（））{
currentInnerHtml=“”；
});
setInterval（函数（）{
currentInnerHtml=innerHtml；
控制台日志（元素）；
console.clear（）；
elementWithHiddenContent.innerHTML=currentInnerHtml；
}, 1000);
}
输入用户名

输入密码
 <代码> .AddieGeTeTeTyx被禁止，在移动底部错误之后考虑使用更多标准化的颜色，但是它不是按照我想要的方式执行的，这里标签需要在浏览器检查器中禁用，但它会显示它们我能做什么？@ RAMANACHORANGI你们到底想做什么？只是隐藏div？不，我的问题是当我执行ctrl+\u shift+时，我的意思是检查当时我想禁用其中的标记我不想在浏览器检查器中显示什么内容请提供帮助？