cannot find elements and functions in browserified javascript on events

Question

I have been trying to resolve this problem, I am using some node module which I'd need at client side and hence, I am using browserify to generate a build.js file. When I am using this file, I am getting:

Uncaught TypeError: Cannot read property 'value' of null for values

and

Uncaught ReferenceError: [function_name] is not defined for functions on button click events..

When I tried moving the events from inline "onclick" to someButton.addEventListener('click', function(e)) then nothing happens, not even an alert works.

Its similar to the problem described in this question: Using browserify, Uncaught ReferenceError: function is not defined, but the solution didn't help.

Here is my javascript file which i am using to create a build using browserify (outBrowserify.js):

var serverName = "http://127.0.0.1:9000";
var socket = io.connect(serverName);
console.log('CLient connecting to server: ' + serverName);
socket.on('ConnectionConfirmation', function(data){
    console.log('Message from server: ' + data.text);
});

var Firebase = require('firebase');

var btnLogin = document.getElementById('btn_validateLogin');
    if(btnLogin)
    {
        btnLogin.addEventListener('click', function(e){ //nothing happens..
            alert('function added..');
        });
    }
var username = document.getElementById('ipt_username');
console.log('username : ' + username.value); //gives an error 

function ValidateLoginCredentials()
{
    var username = document.getElementById('ipt_username');
    var passwd = document.getElementById('ipt_password');
    console.log(username.value);
    console.log(passwd.value);
    ClientID = username.value;
    socket.emit('ValidateLogin', {username: username.value, password: passwd.value});
}

and the HTML is:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Test</title>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="/javascripts/outBrowserify.js"></script>
  </head>
  <body>
    <div id="login">
      <table>
        <tr>
          <td>
            <label>Username :</label>
          </td>
          <td>
            <input id="ipt_username" type="text" name="username">
          </td>
        </tr>
        <tr>
          <td>
            <label>Password :</label>
          </td>
          <td>
            <input id="ipt_password" type="password" name="password">
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <input id="btn_validateLogin" type="button" value="Validate Login" onclick="ValidateLoginCredentials()">
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

The html is converted from index.jade in my application as I am using node.js with express. Also, when I run the script directly, it works except the modules which are unavailable to browser.

does it work if you bind the button after the DOM renders? `$(document).ready(function(){ bindBtnLogin() })` — Plato, Jul 21 '15 at 17:53

score 0 · Accepted Answer · answered Jul 21 '15 at 17:56

0

Javascript and HTML blocks are executed in the order they appear.

It appears to me that your outBrowserify.js script is being executed in the "head" section of the web page, before the "body" DOM has been generated. Calls to document.getElementById('btn_validateLogin'), and such, will return null at that point since the browser has not processed the body text yet.

Adding alert(btnLogin) before your if statement should confirm that it is not an object.

While it may not solve all problems, you need to either delay script execution until "onload" time (using the HTML tag "onload" attribute), or move the JavaScript source block lower down in the body. In this respect, this problem should happen with the Javascript even if it is not browserified, and regardless of events.

answered Jul 21 '15 at 17:56

Cris Mooney

185
10

I tried this solution after searching and it still didn't work, while I believe what you are saying is the reason behind this. I looked a little more and found a solution for delaying the event bindings on control by using DOMContentLoaded event (credit to: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded).. I have another problem if you can share your views about the same, adding the events inside DOMContentLoaded is not attaching the event, rather its firing the corresponding functions. And after that again the button click is not doing anything. – recursiveStack Jul 21 '15 at 19:16
Glad I could have been helpful to this point. However, since DOMContentLoaded is an optimized variation of the generic concept body.onload (which should logically "work" based on your feedback), these solutions deviate from the "browserified" and "events" implicated in the question and have wandered too far off Stackoverflow topic guidelines (http://stackoverflow.com/help/on-topic). And, guidelines are right: I am not clear on your solution and at this point, thus can't advise. Please consider simplifying your case as part of debugging, then updating your question and/or starting a new one. – Cris Mooney Jul 21 '15 at 20:19

cannot find elements and functions in browserified javascript on events

1 Answers1