如何將我的onclick事件鏈接到外部JavaScript函數？

我把我的JavaScript鏈接到了我的HTML文件，所以我不確定爲什麼當我點擊這個按鈕時沒有調用setUser函數。如何將我的onclick事件鏈接到外部JavaScript函數？

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chat Demo</title> 
    <link type="text/css" rel="stylesheet" href="client_style.css"/> 
</head> 

<script src="/socket.io/socket.io.js"></script> 
<script src="http://code.jquery.com/jquery-1.11.1.js"></script> 

<body> 
    <h1 class = "text"> THE LEMON LAW </h1> 
    <div id="error-container" ></div> 
    <div style="text-align:center"> 
    <ul style="list-style-type: none;" > 
     <li><input id="name" type="text" name="name" value="" placeholder="Enter your Name!" ></li> 
     <li><input id="age" type="text" name="age" value="" placeholder="Enter your Age!" ></li> 
     <li><input id="gender" type="text" name="gender" value="" placeholder="Enter your Gender!" ></li> 
    </ul> 
    <button type="button" name="button" onclick="setUser()">Start chating!</button> 
    </div> 
    <script type="text/javascript" src="/public/chat.js"></script> 

</body> 
</html>

，這是JavaScript文件

function setUser(){ // set username event listener 
    name = document.getElementById('name').value; 
    age = document.getElementById('age').value; 
    gender = document.getElementById('gender').value; 

    //send user name to server 
    socket.emit('setUser', {name:name , age:age, gender:gender}); 
};

來源

2017-02-05 Martin Guo

控制檯中的任何錯誤？ – mrlew

你確定函數沒有被調用嗎？在函數內部添加一個'console.log（）'語句，看它是否將語句輸出到控制檯。另外，請提供更多部分的HTML代碼。 –

@RitikSaxena我已經添加了我的HTML代碼的其餘部分，我還添加了一個console.log（）語句，並且當單擊按鈕時沒有任何內容正在打印到控制檯。 –

的問題是你有沒有在你的客戶端代碼中定義socket內我的功能。

這裏試試這個。

HTML文件

//請注意，我用網上路徑，socket.io和jquery。你不需要使用它們。你可以用自己的<script>參考繼續

<!DOCTYPE html> 
<html> 
<head> 
    <title>Chat Demo</title> 
    <script src="https://cdn.socket.io/socket.io-1.4.5.js"></script> 
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script> 
    <script type="text/javascript" src="new.js"></script> 
</head> 

<body> 
<h1 class = "text"> THE LEMON LAW </h1> 
    <div id="error-container" ></div> 
    <div style="text-align:center"> 
    <ul style="list-style-type: none;" > 
     <li><input id="name" type="text" name="name" value="" placeholder="Enter your Name!" ></li> 
     <li><input id="age" type="text" name="age" value="" placeholder="Enter your Age!" ></li> 
     <li><input id="gender" type="text" name="gender" value="" placeholder="Enter your Gender!" ></li> 
    </ul> 
    <button type="button" name="button" onclick="setUser()">Start chating!</button> 
    </div> 
</body> 
</html>

new.js文件

//使用文件名右邊的參考。我剛剛使用新的例子。

function setUser(){ // set username event listener 
     name = document.getElementById('name').value; 
     age = document.getElementById('age').value; 
     gender = document.getElementById('gender').value; 
     var socket = io.connect('http://localhost'); 
     socket.emit('setUser', {name:name , age:age, gender:gender}); //send user name to server 
     console.log("setUser Called"); //to check if it's calling this function. Just used to show you. 
    };

函數被調用並且套接字嘗試連接到主機。您必須確定socket。我已經連接到配置我localhost通過Apache server

的標準方法來定義插座是這樣的：

var socket = io.connect('http://localhost:8090'); 
//io is a global variable and hence no need to define it.

注意到這裏我們也定義的端口號。 8090僅作爲示例使用

來源

2017-02-05 05:46:22

如何將我的onclick事件鏈接到外部JavaScript函數？

回答

相關問題