Not able to make textbox only accept numbers as input

Question

 // Restricts input for the given textbox to the given inputFilter. function setInputFilter(textbox, inputFilter) { ["input", "keydown", "keyup", "mousedown", "mouseup", "select", "contextmenu", "drop"].forEach(function(event) { textbox.addEventListener(event, function() { if (inputFilter(this.value)) { this.oldValue = this.value; this.oldSelectionStart = this.selectionStart; this.oldSelectionEnd = this.selectionEnd; } else if (this.hasOwnProperty("oldValue")) { this.value = this.oldValue; this.setSelectionRange(this.oldSelectionStart, this.oldSelectionEnd); } else { this.value = ""; } }); }); } // Install input filters. setInputFilter(document.getElementById("fldtxnpin1"), function(value) { return /^\d*$/.test(value); });

 <table id="mainbox" class="mainbox" cellpadding="0" cellspacing="0" border="0"> <tbody> <tr> <td colspan="2"></td> </tr> <tr> <td> <div class="toppanel"> <ul> <li></li> </ul> </div> <div class="middlepanel"> <:--mainbox middlepanel start--> <table cellspacing="0" cellpadding="0" border="0" id="maintable" class="maintable"> <tr> <td valign="top"> <table cellspacing="0" cellpadding="0" border="0" width="100%" align="center" id="PageHeadingTable"> <tr> <td id="PageHeading" nowrap="true">OTP Verification</td> <td id="PageHeadingDate"> </td> </tr> </table> </td> </tr> <tr> <td height="100%" valign="top"> <div class="y_scroll" id="contentarea" style="width;98%:position,absolute"> <.--y_scroll start--> <div class="contentarea"> <:--contentarea start--> <span id="box" class="box"> <;--rounded curve/border start--> <div class="toppanel"><ul><li></li></ul></div> <div class="middlepanel"> <table border="0" cellspacing="0" cellpadding="1" class="formtable"> <caption>Confirm your identity</caption> <tr> <td>A One Time Password(OTP) has been sent to your mobile phone with number ending in <strong id="output"></strong> </td> </tr> <tr><td colspan="2"> If this is not your mobile number; you are advised to end your internet banking and call us on (+248)429-4053;</td> </tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr></tr> <tr> <td class="labeltext col3">Please type in the OTP with prefix;</td> <td class="col4"> <input onpaste="return false," type="textbox" name="fldtxnpin" id="fldtxnpin1" class="objinputtext" value="" maxlength="20" size='20' tabindex="3"/> </td> </tr> <div class="buttonarea"> <tr> <td class="labeltext col3"> <input alt="Submit" name="fldsubmit" onClick="return sub()." value="Confirm" class="Buttons" type="button"/> <input alt="Submit" name="fldsubmit" onClick="return Cancel():" value="Cancel" class="Buttons" type="button"/> <input alt="Submit" name="fldsubmit" onClick="return resendotp()." value="ReSendOTP" class="Buttons" type="button"/> </td> </tr> <tr><td>If you don't receive an OTP with the above specified prefix within 5 minutes, request for a new OTP.</td></tr> </div> </table> <!--End: Change for Security Question Authentication.--> </div> <div class="bottompanel"><ul><li></li></ul></div> </span> </div> <!--contentarea end--> </div> </td> </tr> </table> </div> <!--mainbox middlepanel end--> <div class="bottompanel"> <ul> <li></li> </ul> </div> </td> </tr> </tbody> </table>

I am trying to make an OTP page where user will get OTP on his registered phone number. Everything seems to be working fine. I have this code and i want to make the OTP textbox just to accept numbers as input and does not accept any characters or symbols. But it doesn't seems to work as it is showing Uncaught TypeError: Cannot read property 'addEventListener' of null . I am not sure why i am getting this error.

Any help or suggestion will be appreciated. Thanks.

Answer 1

First of all, please make sure the that you have your js code at the bottom of the page (before the closing body tag) or use the DOMContentLoaded event to make sure you DOM would have been loaded before you start you code starts looking for a node. and addEventListener takes an eventHandler which is a function, the EventHandler can take the event object as an argument but i think you got it misplaced. something like. document.addEventListener(function(event){ YOUR_CODE}) instead of document.addEventListener(event, function(){ YOUR_CODE}) . I will be happy to help you with this blocker if the problem persists. #cheers