2017-03-05 13 views
2

私は単純なWebページを提供しようとしています。私のHTMLではフォームがあり、何かが検索されたときに結果が見つからないと単純に言いたいのですが。私がJavaScriptタグをhtml文書に挿入すると、divに値が設定されます。しかし、私が外部のjsファイルを使用するときはいつでも、それは実行されません。コンソールに何も記録されず、アラートが表示されません。ただし、リクエストURLを記録すると、/button_click.jsが配信されていることがわかるため、サーバーはこれらのファイルを提供しています。誰かがなぜこれが起こるのか説明できますか?ここに参照のための私のコードは次のとおりです。外部のJavaScriptが読み込まれますが実行されません

index.htmlを

<!DOCTYPE html> 

<html> 
    <head> 
    <style> 
     body{background: skyblue; font-family: verdana; color: #fff; padding: 30px;} 
     h1{font-size: 48px; text-transform: uppercase; letter-spacing: 2px; text-align:center;} 
     p{font-size: 16px; text-align:center;} 
     </style> 

     <script type="text/javascript" src="button_click.js"> 
     // if uncommented and without the src tag this seems to do the job 
     // function buttonClick() { 
     // document.getElementById('result').innerHTML = "No results found"; 
     // return false; 
     // } 
     </script> 
    </head> 

    <body> 
    <h1> Welcome to the home page</h1> 
    <form id="form" onsubmit="return buttonClick()"> 
     <input type="text" name="search"> <br> 
     <input type="submit" name="submit"> <br> 
    </form> 

    <p id = "result"> 
    </p> 
    </body> 
</html> 

button_click.js

function buttonClick() { 
    console.log('in here'); 
    alert("in here"); 
    document.getElementById('result').innerHTML = "No results found"; 
    return false; 
} 

UPDATE

マイコンソールは私のために予期しないトークンを提供しますlinの "<"エラー私のjsファイルのe 1。私がブラウザリソースを通してファイルをチェックしようとするとき、jsファイルは明らかに私のindex.htmlファイルとまったく同じです。それはjavascriptを含んでおらず、index.htmlの内容を持っています。どうしてこれなの?

私のすべてのファイルが同じディレクトリにあると私はwell.Hereとしてすべてのファイル名をチェックしては、参考のために私のサーバーファイルの内容は以下のとおりです。

server.js

const http = require('http'); 
const fs = require('fs'); 


const server = http.createServer(function(req, res) { 
    res.writeHeader(200, {"Content_Type": "text/html"}); 
    var readStream = fs.createReadStream(__dirname + '/index.html', 'utf8'); 
    readStream.pipe(res); 
    console.log(req.url); 
    console.log('served page'); 
}); 

server.listen(3000, '127.0.0.1'); 
console.log('Listening in port 3000'); 
+1

src属性が存在する場合、スクリプトタグ間のコンテンツは無視されます。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script – Teemu

+0

ブラウザのコンソールをチェックインしてください任意のエラー? –

+0

'document.onload();'の中にbutton_click.jsのコンテンツを囲み、それが動作するかどうかテストします。または、スクリプトのタグを ''タグの前に入れてください – NDFA

答えて

1

、あなたの質問にserver.jsのコンテンツを追加した後、それは何が起こったのか明確になります。

http.createServerへのコールバックはと呼びすべてです。インデックスページの内容でbutton_click.js結果を得るために、あなたの要求はあなたが記述行動を与え、戻ってくる理由を説明

var readStream = fs.createReadStream(__dirname + '/index.html', 'utf8'); 
readStream.pipe(res); 

...:そして、あなたは実際にこのような正常な応答を変更します。

このように2行を削除すると、よりうまくいくはずです。

これに関するnodejsのドキュメントも参照してください。

NB:あなたは、コードのこれらの行を実行する前にurlに必要なフィルタリングを実行し、その後、いくつかの状況で返されるindex.htmlを強制したい場合。

0

これはコードですが、form.onsubmitという関数が呼び出されたときには機能しません。

function buttonClick() { 
 
    console.log('in here'); 
 
    alert("in here"); 
 
    document.getElementById('result').innerHTML = "No results found"; 
 
    return false; 
 
}
<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
    <style> 
 
     body{background: skyblue; font-family: verdana; color: #fff; padding: 30px;} 
 
     h1{font-size: 48px; text-transform: uppercase; letter-spacing: 2px; text-align:center;} 
 
     p{font-size: 16px; text-align:center;} 
 
     </style> 
 
</head> 
 

 
    <body> 
 
    <h1> Welcome to the home page</h1> 
 
    <form id="form" onsubmit="return buttonClick()"> 
 
     <input type="text" name="search"> <br> 
 
     <input type="submit" name="submit"> <br> 
 
    </form> 
 

 
    <p id = "result"> 
 
    </p> 
 
    </body> 
 
</html>

機能がinput[type=submit]から呼び出すときにこのコードは動作します。

function buttonClick() { 
 
    console.log('in here'); 
 
    alert("in here"); 
 
    document.getElementById('result').innerHTML = "No results found"; 
 
    return false; 
 
}
<!DOCTYPE html> 
 

 
<html> 
 
    <head> 
 
    <style> 
 
     body{background: skyblue; font-family: verdana; color: #fff; padding: 30px;} 
 
     h1{font-size: 48px; text-transform: uppercase; letter-spacing: 2px; text-align:center;} 
 
     p{font-size: 16px; text-align:center;} 
 
     </style> 
 
    </head> 
 

 
    <body> 
 
    <h1> Welcome to the home page</h1> 
 
    <form id="form" > 
 
     <input type="text" name="search"> <br> 
 
     <input type="submit" name="submit" onclick="buttonClick();"> <br> 
 
    </form> 
 

 
    <p id = "result"> 
 
    </p> 
 
    </body> 
 
</html>

+0

これは動作しません。 JavaScriptコードをインラインにしても、onclickによってページが更新されます。別のファイルにjavascriptコードを保存すると、onclickはアラートを表示せず、div内のhtml –

+0

コンソールをチェックします。何かエラーがありますか? –

関連する問題