最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

javascript - onload call to getElementById returns null - Stack Overflow

matteradmin5PV0评论

I looked and didn't find the case I have here -- a lot of the prior answers said 'wait for the 'onload' to call getElementById' but that's what I started with and it doesn't work -- getElementById returns null in this code in my index.php file:

<html>
<script type="text/javascript">

    function checkPwd()
    {
        var thePwd = document.getElementById("theUsersPassword");
        alert("the var thePwd is: " + thePwd);

    }
</script>        
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Beta:</title>
</head>

<body onload="checkPwd()">

  <form method="post"  action="index.php">
    Beta: <input name="theUsersPassword" type="password"><br/>
    <input type="submit" value="Submit" />  
    </form>

</body>
</html>

I looked and didn't find the case I have here -- a lot of the prior answers said 'wait for the 'onload' to call getElementById' but that's what I started with and it doesn't work -- getElementById returns null in this code in my index.php file:

<html>
<script type="text/javascript">

    function checkPwd()
    {
        var thePwd = document.getElementById("theUsersPassword");
        alert("the var thePwd is: " + thePwd);

    }
</script>        
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Beta:</title>
</head>

<body onload="checkPwd()">

  <form method="post"  action="index.php">
    Beta: <input name="theUsersPassword" type="password"><br/>
    <input type="submit" value="Submit" />  
    </form>

</body>
</html>
Share Improve this question asked Nov 22, 2011 at 19:07 wantTheBestwantTheBest 1,7204 gold badges46 silver badges71 bronze badges 2
  • 3 Alert statement should be alert("the var thePwd is: " + thePwd.value); – fardjad Commented Nov 22, 2011 at 19:10
  • okay now thePwd is HTMLInputElement but alert("The password's value entered was " + thePwd.value) and alert("The password's innerHTML entered was " + thePwd.innerHTML) are both empty after I type 'foo' in the password field -- is my form's post wiping out the contents somehow? – wantTheBest Commented Nov 22, 2011 at 19:29
Add a ment  | 

3 Answers 3

Reset to default 6

getElementById get an element by ID not by name. You must change

<input name="theUsersPassword" type="password">

to

<input name="theUsersPassword" id="theUsersPassword" type="password" />

You are mixing up name and id

Edit:

In other words, you need to change

<input name="theUsersPassword" type="password">

to

<input name="theUsersPassword" id="theUsersPassword" type="password">

You can use the code below. getElementById returned an object not a value.

JavaScript

function checkPwd()
{
    var thePwd = document.getElementById("theUsersPassword").value;
    alert("the var thePwd is: " + thePwd);

}

Html

<input name="theUsersPassword"  id="theUsersPassword"  type="password">
Post a comment

comment list (0)

  1. No comments so far