无法在 browserified javascript 事件中找到元素和函数

Question

我一直在尝试解决这个问题，我正在使用客户端需要的一些节点模块，因此，我正在使用 browserify 生成一个 build.js 文件。当我使用这个文件时，我得到：

未捕获的类型错误：无法读取属性 'value' 的空值

和

Uncaught ReferenceError: [function_name] 没有为按钮点击事件的函数定义..

当我尝试将事件从内联 "onclick" 移动到 someButton.addEventListener('click', function(e)) 时，什么也没有发生，甚至警报都不起作用。

类似于这个问题描述的问题： Using browserify, Uncaught ReferenceError: function is not defined，但解决方案没有帮助。

这是我的 javascript 文件，我用它来使用 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});
}

而 HTML 是：

<!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>

html 在我的应用程序中从 index.jade 转换而来，因为我在 express 中使用 node.js。另外，当我直接运行脚本时，除了浏览器不可用的模块外，它都可以工作。

Answer 1

Javascript 和 HTML 块按照它们出现的顺序执行。

在我看来，在生成 "body" DOM 之前，您的 outBrowserify.js 脚本正在网页的 "head" 部分执行。对 document.getElementById('btn_validateLogin') 等的调用将在此时 return 为空，因为浏览器尚未处理正文文本。

在你的 if 语句之前添加 alert(btnLogin) 应该确认它不是一个对象。

虽然它可能无法解决所有问题，但您需要将脚本执行延迟到 "onload" 时间（使用 HTML 标记 "onload" 属性），或者移动 JavaScript 正文下方的源代码块。在这方面，这个问题应该发生在 Javascript 上，即使它没有被浏览器化，也不管事件如何。

无法在 browserified javascript 事件中找到元素和函数

cannot find elements and functions in browserified javascript on events

javascript

jquery

html

node.js

browserify