在browserified javascript中找不到事件中的元素和函數

我一直在試圖解決這個問題，我使用了一些我需要在客戶端的節點模塊，因此我使用browserify來生成build.js文件。當我使用這個文件，我得到：在browserified javascript中找不到事件中的元素和函數

遺漏的類型錯誤：無法讀取空對值

和

財產「值」

未捕獲的ReferenceError：[FUNCTION_NAME]是不是功能上的定義按鈕點擊事件..

當我試圖將事件從內聯「onclick」移動到someButton.addEventListener（'click'，函數（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是從指數轉換.jade在我的應用程序中，因爲我使用了express.js。另外，當我直接運行腳本時，它可以工作，除了瀏覽器不可用的模塊。

來源

2015-07-21 recursiveStack

如果你在DOM渲染後綁定按鈕，它會工作嗎？ '$（document）.ready（function（）{bindBtnLogin（）}）' – Plato

Javascript和HTML塊按它們出現的順序執行。

在我看來，在生成「body」DOM之前，您的outBrowserify.js腳本正在網頁的「head」部分執行。對document.getElementById（'btn_validateLogin'）的調用等等，由於瀏覽器尚未處理正文文本，所以在那一點上將返回null。

在if語句之前添加警報（btnLogin）應確認它不是對象。儘管它可能無法解決所有問題，但需要延遲腳本執行時間直到「onload」時間（使用HTML標記「onload」屬性），或者將JavaScript源代碼塊在主體中向下移動。在這方面，這個問題應該發生在Javascript中，即使它沒有被瀏覽過，也不管事件發生。

來源

2015-07-21 17:56:20

我在搜索後試過這個解決方案，但它仍然沒有工作，而我相信你說的是這個背後的原因。我看了更多，並找到了一個解決方案，通過使用DOMContentLoaded事件來延遲控件上的事件綁定（信貸：https：//developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded）..我有另一個問題是，如果您可以分享您的觀點相同，添加DOMContentLoaded內的事件不附加事件，而是它觸發相應的功能。之後再次點擊按鈕沒有做任何事情。 – recursiveStack

很高興我能對這一點有所幫助。然而，由於DOMContentLoaded是通用概念body.onload的一個優化變體（它應該基於您的反饋在邏輯上「工作」），這些解決方案偏離了涉及該問題的「瀏覽器化」和「事件」，並且偏離了太遠Stackoverflow主題指南（http://stackoverflow.com/help/on-topic）。而且，指導方針是正確的：我不清楚您的解決方案，因此目前無法提供建議。請考慮簡化您的案例作爲調試的一部分，然後更新您的問題和/或開始一個新的問題。 –

在browserified javascript中找不到事件中的元素和函數

回答

相關問題