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>

と、この問題は、あなたのクライアントコードでsocketを定義していないでは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（）ステートメントを追加しました。ボタンをクリックするとコンソールに何も印刷されません。 –

私の関数です。

ここでこれを試してください。

HTMLファイル

//私はsocket.ioとjqueryのためのオンラインパスを使用しましたことに注意してください。それらを使用する必要はありません。あなたは

<!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ファイル

//ファイル名の右の参照を使用し、独自の<script>参照して続けることができます。私はちょうど例として新しいものを使用しました。

この関数が呼び出され、ソケットがホストに接続しようとします。 socketを定義している間は、必ず確認する必要があります。ここでは、ポート番号を定義気づく

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

：私はApache server

ソケットを定義するための標準的な方法により構成された私のlocalhostに接続されてきたことはこれです。 8090は例として使用されています

出典

2017-02-05 05:46:22

onclickイベントを外部のJavaScript関数にリンクするにはどうすればよいですか？

答えて

関連する問題