链接index.html client.js和server.js
我从node.js开始,我的第一个程序已经有问题。以下是我正在使用的代码。 index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Random Temperatures</title>
</head>
<body>
<input type="text" id="tb" name="tb" />
<input type="button" value="Random Number!" id="myButton" name="myButton"/>
<script src="client.js"></script>
</body>
</html>
client.js:
const textBox = document.getElementById('tb');
const button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
var rnd = Math.floor(Math.random() * 100);
textBox.value = rnd;
});
server.js:
var app = require('http').createServer(response);
var fs = require('fs');
app.listen(8080);
console.log("App running…");
function response(req, res) {
fs.readFile(__dirname + '/public/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Failed to load file index.html');
}
res.writeHead(200);
res.end(data);
});
}
启动应用程序时,我转到浏览器文本框,然后显示按钮。但是在浏览器控制台中,我会遇到这些错误:
client.js:1个未接收的语法:意外的令牌&lt;
contentscript.js:112 onResrdy中的异常:typeerror:无法阅读 不确定的属性
localhost/:1未检查的Runtime.lasterror:无法建立 联系。接收端不存在。
我想我的问题是3个文件之间的链接,但我尝试了几件事,但无法解决问题。我确定这是一个愚蠢的错误,但是请原谅我我只是开始。有建议吗?
I'm starting with Node.js and I have already a problem in my first program. Below is the code I'm using. Index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Random Temperatures</title>
</head>
<body>
<input type="text" id="tb" name="tb" />
<input type="button" value="Random Number!" id="myButton" name="myButton"/>
<script src="client.js"></script>
</body>
</html>
Client.js:
const textBox = document.getElementById('tb');
const button = document.getElementById('myButton');
button.addEventListener('click', function(e) {
var rnd = Math.floor(Math.random() * 100);
textBox.value = rnd;
});
Server.js:
var app = require('http').createServer(response);
var fs = require('fs');
app.listen(8080);
console.log("App running…");
function response(req, res) {
fs.readFile(__dirname + '/public/index.html',
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Failed to load file index.html');
}
res.writeHead(200);
res.end(data);
});
}
When I start the application I go to the browser the text box and the button appear. But in the browser console I'm getting these errors:
client.js:1 Uncaught SyntaxError: Unexpected token <
ContentScript.js:112 Exception in onResRdy: TypeError: Cannot read
property 'htmlRes' of undefinedlocalhost/:1 Unchecked runtime.lastError: Could not establish
connection. Receiving end does not exist.
I guess my problem is the linking between the 3 files but I tried several things and I can't solve the problem. I'm sure it's a stupid error but forgive me I'm just getting start. Any advice?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
浏览器(因为您有
&lt; script src =“/client.js”&gt;
)提出了/client.js
服务器的请求:服务器:
index.html
因为
index.html
以&lt;
开始,浏览器会抛出一个当它试图以JavaScript运行时,错误。为什么您给浏览器
index.html
当它要求client.js
?时,您需要检查请求对象,确定什么URL是被要求写逻辑以返回正确的状态代码和正确的内容类型的正确资源,然后将其返回给客户端。
但您可能应该直接尝试使用
createserver
- 因为它涉及大量的轮毂重新发明 - 切换到使用 express 并通过(非常短)入门指南< /a>包括有关使用static
模块提供静态文件的部分。The browser (because you have
<script src="/client.js">
) makes a request for/client.js
The server:
response
index.html
Since
index.html
starts with<
, the browser throws an error when it tries to run it as JavaScript.Why are you giving the browser
index.html
when it asks forclient.js
?You need to examine the request object, determine what URL is being asked for, write logic to return the correct resource with the correct status code and the correct content-type, and then return that to the client.
The Node.js documentation has an example of this but you should probably stop trying to use
createServer
directly — since it involves a massive amount of wheel reinvention — switch to using Express and work through the (very short) getting started guide which includes a section on using thestatic
module to serve up static files.