CODEWITHSUNDEEP
javascriptasp.net
user1804234
user1804234

Reputation: 341

Cannot get document.getElementByID to work

The following function doesn't work for some reason. Can someone see what the problem is?

function checkMaxLen(txt, maxLen) {
    var actualLen = txt.value.length;
    var remain = maxLen - actualLen;
    document.getElementById('remainChar').Value = remain;
}

<input type="text" id="remainChar" runat="server" value="500"/>

Whenever I try to run the function, I get this error:

Microsoft JScript runtime error: Unable to set value of the property 'Value': object is null or undefined

Upvotes: 0

Views: 1976

Answers (4)

Miltos Kokkonidis
Miltos Kokkonidis

Reputation: 3996

Main Problem: There is no Javascript getElementById issue, but rather a problem with feeding the right id into getElementById (caused because ASP.NET feels free to change the ids of runat="server" elements) (covered by the accepted answer). This is what caused the error the OP reported: 

Microsoft JScript runtime error: Unable to set value of the property 'Value': object is null or undefined

This was because getElementById was given a non-existent id and returned null.

Another Problem: The second problem was indeed a Javascript problem, but not related to getElementById either. Javascript is case sensitive, so trying to set the value property of a input element's DOM object cannot be done by trying to set But even if the (non-existent) Value property.

Solution:

The correct code that solves both problems follows:

  function checkMaxLen(txt, maxLen) {
    var actualLen = txt.value.length;
    var remain = maxLen - actualLen;
    document.getElementById('<%= remainChar.ClientId%>').value = remain 
  }

Note: Thanks go to Ian for pointing out an important oversight in my original answer.

Upvotes: 1

Christian Westman
Christian Westman

Reputation: 3005

.Value should be .value, script should be executed after appears in the source or after the DOMReady event has been fired.

also since this is asp.net the id attribute of the box will not be "remainChar" but transformed into something else.

so you either need to find out what the final id will be or remove the runat="server" attribute

<html>
<body>
<input type="text" id="remainChar" value="500"/>
<script>
    function checkMaxLen(txt, maxLen) {
        var actualLen = txt.value.length;
        var remain = maxLen - actualLen;
        document.getElementById('remainChar').value = remain;
    }
    checkMaxLen({value:""},20);
</script>
</body>
</html>

Upvotes: 0

Marek Karbarz
Marek Karbarz

Reputation: 29324

Check the ID of the input in your final HTML. Since you have runat="server" ASP.NET is likely adding its typical container prefixes.

Upvotes: 3

Dan Kanze
Dan Kanze

Reputation: 18595

case sensitive:

document.getElementById('remainChar').value

Upvotes: 0

Related Questions