.js中的Javascript函数不能在.html中getElementById

Javascript function in a .js cannot getElementById in the .html

本文关键字：html getElementById 不能 中的 Javascript 函数 js      更新时间：2023-09-26

我有一个login.js，它有一个函数，当点击HTML中的clickme按钮时调用。

document.getElementById('clickMe').addEventListener('click',execuateAllCode);

下面这行是clickme按钮调用的函数，它不起作用

var password = document.getElementById("password").value;

给出如下错误:

Uncaught TypeError: Cannot read property 'value' of null

pop .html包含以下代码:

...
<input id="clickMe" type="button" value="clickMe"/>
<input type="password" name="password" id="password" value="temppassword" placeholder="Password"/>
...

该错误应该意味着没有元素包含id="password"。但我确实有这种本我。可以在login.js功能不"看到"在HTML文件中的输入?

编辑1:我试着添加:

window.onload = function() {
  execuateAllCode()
};

到.js文件中，但这并不能消除错误，它还会导致代码的其他部分出现错误，并停止样式化。

HTML: 

<html>
<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
    <input id="clickMe" type="button" value="clickme"/>
    <script language="javascript" src="login.js"></script>
    <input type="text" name="email" id="username" value="user@email.com" placeholder="Email"/>
    <input type="password" name="password" id="password" value="temppass" placeholder="Password"/>
</body>
</html>

login.js: 

document.getElementById('clickMe').addEventListener('click',execuateAllCode);
function execuateAllCode() {
    document.write("<br />" + "From login" + "<br />");
    var output;
    output = FunctionOne();
    document.write("<br /> the output:  " + output + "<br />");
}
function FunctionOne(){
...
  var password = document.getElementById("password").value;
  var user_name = document.getElementById("username").value;
...
}

您正在获取尚未加载的元素(DOM尚未加载)。这就是为什么你要面对这个问题。

window.onload = function() {
  /*Do that stuff in this function*/
};

有关更多参考，请查看此链接。https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
希望这对你有帮助

你的popup.html不是包含login.js的页面-这就是为什么login.js中的代码找不到id="password"的DOM元素。但是，包含login.js的页面包含一个id="clickMe"的按钮。

看到你的execuateAllCode后:

http://www.w3schools.com/jsref/met_doc_write.asp -"write()方法主要用于测试:如果在HTML文档完全加载后使用它，它将删除所有现有的HTML。"在使用innerText或innerHTML而不是document.write.

输出的地方添加一个div元素。

你需要做的是:

    在函数外部初始化变量password，然后声明
  1. 或者您可以使用窗口。onload = function_Name;
  2. 为什么不调用登录按钮点击或任何事件的函数?

调试javascript的一个好方法是在console.log中扭曲变量和事件，并在浏览器控制台中检查它们的结果。

尝试在将console.log(password)设置为等于输入的值之后立即添加console.log(password)。这将告诉您jQuery功能是否正常工作。这将帮助您了解HTML"看到"的内容

相关文章：