Question

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

未捕获的TypeError：无法读取属性＆＃39;值＆＃39;值为null

和

未捕获的ReferenceError：没有为按钮点击事件的函数定义[function_name] ..

当我尝试从内联移动事件＆＃34; onclick＆＃34; to someButton.addEventListener（＆＃39;点击＆＃39;，功能（e））然后没有任何反应，甚至没有警报工作。

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

这是我用于使用browserify创建构建的javascript文件（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块按它们出现的顺序执行。

在我看来，你的outBrowserify.js脚本正在＆＃34; head＆＃34;网页的一部分，在＆＃34; body＆＃34;之前DOM已生成。对document.getElementById（＆＃39; btn_validateLogin＆＃39;）等的调用将在此时返回null，因为浏览器尚未处理正文文本。

在if语句之前添加alert（btnLogin）应该确认它不是对象。

虽然它可能无法解决所有问题，但您需要延迟脚本执行，直到＆＃34; onload＆＃34;时间（使用HTML标记＆＃34; onload＆＃34;属性），或将JavaScript源块下移到正文中。在这方面，这个问题应该发生在Javascript中，即使它没有浏览器化，也不管事件是什么。

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

1 个答案: