Question

所以我试图提供一个简单的网页。在我的html中，我有一个表单，我想简单地说在搜索任何内容时都没有找到结果。如果我将一个javascript函数放入脚本标记到html文档中，则会填充div。但是，每当我使用外部js文件时，它甚至都不会被执行。控制台没有记录任何内容，也没有显示警报。服务器正在提供这些文件，但因为如果我记录请求URL，我会看到正在提供/button_click.js。有人可以解释为什么会这样吗？这是我的参考代码：

的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;
}

更新

我的控制台为＆＃34;＆lt;＆＃34;我的js文件中第1行的错误。当我尝试通过浏览器资源检查文件时，js文件显然与我的index.html文件完全相同。它不包含javascript并且具有index.html的内容。这是为什么？

我的所有文件都在同一目录中，我也检查了所有文件名。这是我服务器文件的内容供参考：

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');

Answer 1

在您的问题中添加server.js的内容后，会发现发生了什么。

每个请求都会调用http.createServer的回调。你实际上修改了这样的正常响应：

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

...这解释了为什么您的button_click.js请求会导致索引页面的内容返回，从而提供您描述的行为。

所以删除这两行，它应该可以更好地工作。

另见nodejs文档。

注意：如果要在某些情况下强制index.html返回，请在执行这些代码行之前对url执行必要的过滤。

Answer 2

这是您的代码，但在form.onsubmit中调用的函数时它无效。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

此代码适用于input[type=submit]的函数调用。

＆＃13;

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

＆＃13;

<!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>

＆＃13;

外部javascript加载但不执行

2 个答案: