how to display alert box in using html+javascript and node

Question

I am running node project with html and javascript. How can I display the alert box in html.

My html (index.html)

<!DOCTYPE html>
<html>
    <head>
            <script src="./watch.js"></script>
    </head>
    <body onload="showBox()">
        <h1>Heading</h1>
        <p>Paragraph</p>        
    </body>
</html>

watch.js

function showBox(){
    alert("this is alert box");    
}

server.js

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

const PORT=8080; 

fs.readFile('./index.html', function (err, html) {

    if (err) throw err;    

    http.createServer(function(request, response) {  
        response.writeHeader(200, {"Content-Type": "text/html"});  
        response.write(html);  
        response.end();  
    }).listen(PORT);
});

Error

read about serving static files here - expressjs.com/en/starter/static-files.html that should solve your problem. As @Brad said your server is always returing index.html you need to provide a way to servwe statics — Vishal Sharma
– Vishal Sharma, Commented Aug 2, 2019 at 3:32

Lautaro Jayat · Accepted Answer · 2019-08-02 03:32:42Z

2

I think that the problem is that you are not telling nodeJS where your statics files are. For me, the simplest way is to set the server with Express

 $ npm install express

And then setting up the server and where your static directory is:

var express = require('express');
var app = express();

//setting middleware
app.use(express.static(__dirname + 'public')); //Serves resources from public folder


var server = app.listen(5000);

There are other ways to doit using Native NodeJS, here are some resources:

Nodejs.org - How to serve static files

Also, you can write the script directly in your html file:

<!DOCTYPE html>
<html>
    <head>
            <script>
                function showBox(){
                  alert("this is alert box");    
                 }   
             </script>
    </head>
    <body onload="showBox()">
        <h1>Heading</h1>
        <p>Paragraph</p>        
    </body>
</html>

answered Aug 2, 2019 at 3:32

Lautaro Jayat

4144 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lautaro Jayat Over a year ago

Check all the Express documentation, is super easy to set up and there are a lot of pluguins that can help you too. Native nodeJS could be harder, I think it requires a some hardcore udemy courses in order to manage properly and dont write bugs. Glad to help you :)

Brad · Accepted Answer · 2019-08-02 03:27:09Z

1

Your server is only ever returning index.html, no matter what path is requested. So, your watch.js is never loaded. The contents of index.html are returned instead of watch.js.

Either handle the other paths in your server code, or use something like Express.static, which does this for you.

answered Aug 2, 2019 at 3:27

Brad

164k57 gold badges380 silver badges559 bronze badges

Comments

jdmayfield · Accepted Answer · 2019-08-02 03:56:51Z

Your http server is only outputting the index.html file. You need to either put all your client-side code in that file, or edit your server to load the watch.js file and make it able to send either page.

The first is simpler. Here's a basic example for the second. Most browsers will assume the mime-type by the extention.

Also, change your html for the script name from "./watch.js" to just "watch.js".

I simplified this down to be easier to understand... also const is deprecated and wont work on newer versions of node.

Specifying the mime header like you did is more compatible (Chrome and Firefox will assumebased on file extension, but for example Opera does not, or didnt used to).

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

var doc = {}

doc['/index.html']  = fs.readFileSync('index.html');
doc['/watch.js']    = fs.readFileSync('watch.js');    

var server = (request, response)=>{ 
  response.end(doc[req.url]);  
}

http.createServer(server).listen(8080);

Collectives™ on Stack Overflow

how to display alert box in using html+javascript and node

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related