javascript - Cannot read property 'innerHTML' of null

I am beginner in javascript.

js file

         var msgErrorPalletizedWeight = document.getElementById('msgError');
         function palletizedWeightValidation() {
              console.log("hello");
/*ERROR*/     msgErrorPalletizedWeight.innerHTML += ("Please enter all the values marked with *");
         }

HTML

<head runat="server">
   <title></title>
   <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
   <script src="Scripts/file.js" type="text/javascript"></script>
</head>
<body>
    <p id="msgError"></p>
    <asp:Button ID="btnSubmitPalletized" runat="server" Text="Submit" 
                   OnClientClick="palletizedWeightValidation()" />
</body>

ERROR

Cannot read property 'innerHTML' of null

I searched many sites before asking here, they all remending to check for null before validations which I can do but my problem here is I want to add some text to the p tag as you can see.. How to achieve that? I even tried appending, thought it might solve the problem. I know this is a silly mistake because there are many posts on this... the thing is that I cant understand where I am going wrong.

Please help.

I am beginner in javascript.

js file

         var msgErrorPalletizedWeight = document.getElementById('msgError');
         function palletizedWeightValidation() {
              console.log("hello");
/*ERROR*/     msgErrorPalletizedWeight.innerHTML += ("Please enter all the values marked with *");
         }

HTML

<head runat="server">
   <title></title>
   <link href="Styles/Site.css" rel="stylesheet" type="text/css" />
   <script src="Scripts/file.js" type="text/javascript"></script>
</head>
<body>
    <p id="msgError"></p>
    <asp:Button ID="btnSubmitPalletized" runat="server" Text="Submit" 
                   OnClientClick="palletizedWeightValidation()" />
</body>

ERROR

Cannot read property 'innerHTML' of null

Please help.

Share Improve this question edited Dec 17, 2012 at 6:55 asked Dec 17, 2012 at 6:50 Mr_Green 41.9k47 gold badges170 silver badges276 bronze badges

Hey, if it is silly mistake, answer in ments.. please. – Mr_Green Commented Dec 17, 2012 at 6:51
You probably run the code before the element is available. Move the JavaScript code just before the closing body tag. – Felix Kling Commented Dec 17, 2012 at 6:53
How do you run this JS code? – Blender Commented Dec 17, 2012 at 6:54

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

You are trying to access the element of html when it is not ready, put the statement in event function to get the element in function palletizedWeightValidation.

      function palletizedWeightValidation() {
              var msgErrorPalletizedWeight = document.getElementById('msgError');
              console.log("hello");
/*ERROR*/     msgErrorPalletizedWeight.innerHTML += ("Please enter all the values marked ith *");
         }

EDIT To stop postback, you need to return false from javascrip function.

 <asp:Button ID="btnSubmitPalletized" runat="server" Text="Submit" 
                   OnClientClick="return palletizedWeightValidation()" />


      function palletizedWeightValidation() {
              var msgErrorPalletizedWeight = document.getElementById('msgError');
              console.log("hello");
/*ERROR*/     msgErrorPalletizedWeight.innerHTML += ("Please enter all the values marked ith *");
              return false; // returning true will cause postback.
         }

The important thing is when your js file gets executed. If you load js file inside head tag, your file will be executed before DOM is created. That means, document.getElementById function returns null.

The error you are getting is caused because you are trying to read an attribute of a NULL object. This means that your line:

var msgErrorPalletizedWeight = document.getElementById('msgError');

is not finding any elements on your page.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Cannot read property 'innerHTML' of null - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)