外部javascript加載但不執行

所以我試圖提供一個簡單的網頁。在我的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的「<」錯誤e 1在我的js文件中。當我通過瀏覽器資源嘗試並檢查文件時，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');

來源

2017-03-05 Raees Rajwani

如果存在src屬性，腳本標記之間的內容將被忽略，請參閱https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script – Teemu

您是否在瀏覽器控制檯中檢查過有什麼錯誤？ –

在'document.onload（）;'中環繞button_click.js的內容並測試它是否有效。或在''標記之前放置腳本標記 – NDFA

當你添加的server.js你的問題的內容，很清楚發生了什麼事。

回調http.createServer被要求爲每請求。而你實際修改這樣的正常反應：

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

...這就解釋了爲什麼你的button_click.js結果的索引頁回來，給你描述的行爲的內容請求。

因此，刪除這兩條線，它應該工作得更好。

另請參閱nodejs文檔。

注意：如果要強制index.html在一些情況下被退回，然後執行這些代碼行之前執行的url必要的過濾。

來源

2017-03-05 16:20:43 trincot

這是您的代碼，但在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>

來源

2017-03-05 13:56:36

這不起作用。即使我將javascript代碼內聯，onclick也會導致頁面刷新。當我將javascript代碼保存在單獨的文件中時，onclick不會顯示任何警報或更改div內部的html –

檢查您的控制檯。有什麼錯誤嗎？ –

外部javascript加載但不執行

回答

相關問題