关于jquery：无法在事件的浏览器化javascript中找到元素和函数


cannot find elements and functions in browserified javascript on events

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

未捕获的TypeError：无法读取值为null的属性'value'

和

未捕获的ReferenceError：未为按钮单击事件中的函数定义[function_name]。

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

它类似于此问题中描述的问题：
使用browserify时，未定义Uncaught ReferenceError：函数，但该解决方案无济于事。

这是我的JavaScript文件，我正在使用该文件使用browserify(outBrowserify.js)创建构建：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html lang="en">
  <head>
    Test
    <script type="text/javascript" src="/socket.io/socket.io.js">
    <script type="text/javascript" src="/javascripts/outBrowserify.js">
  </head>
  <body>
   
      <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>
   
  </body>
</html>

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

相关讨论

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

在我看来，您的outBrowserify.js脚本是在生成"正文" DOM之前在网页的"头部"部分执行的。调用document.getElementById('btn_validateLogin')等，由于浏览器尚未处理主体文本，因此此时将返回null。

在if语句之前添加警报(btnLogin)，以确认它不是对象。

尽管它可能无法解决所有问题，但您需要将脚本执行延迟到"加载"时间(使用HTML标记" onload"属性)，或者将JavaScript源代码块移到正文中的较低位置。在这方面，即使未进行浏览器化的Java脚本，也不管事件如何，都应该发生此问题。

相关讨论