How to call a function from index.html to app.js file in node js application javascript

Question

I had a node js application where I have my app.js and one html which gets displayed for the route /index.Now In my index file I had a button and text box and when I click button Iam trying to call a function.Where in that function I will have a variable with some text "Hello" which should be displayed in text box.I couldnt achieve this can some one help.

<html>
<body>
<div class="jumbotron"  style="padding:40px;">
<h1>Hello!!!</h1>
<div>
<button type="submit" onclick="getData();">Call</button>
<input type="text">
</div>
</div>
</div>
</body>
</html>

app.js

app.get('/index',function(req,res){ 
res.sendFile(path.join(__dirname+'/index.html'));
});
function getData(){
console.log("Hello");
var text="Hello";
};

Right now Im getting reference error that getData is not defined.Can someone help over here.

You need to move getData to your client side js file or just include it in script tags in html. — Nenad Vracar
– Nenad Vracar, Commented Mar 15, 2017 at 10:27
@NenadVracar got it...One question how can we add that function in client side js file...I mean how can we call that js file.. — user7350714
– user7350714, Commented Mar 15, 2017 at 10:33
You just create your client js file in same directory where your index.html file is and include it <script src="fileName.js"></script> or you can write your js code inside <script></script> tags in html file which is not recommended. Also in your app.js file you need to specify where your static files are using `app.use(express.static(path.join(__dirname, 'PathHere'))); — Nenad Vracar
– Nenad Vracar, Commented Mar 15, 2017 at 10:48
Create new folder where your app.js file is called public and put your index.html and client side js file for example main.js, and then in your app.js file add this app.use(express.static(path.join(__dirname, 'public'))); — Nenad Vracar
– Nenad Vracar, Commented Mar 15, 2017 at 11:00

Aron · Accepted Answer · 2017-03-15 10:33:22Z

2

I think you may have misunderstood what NodeJS is. Node isn't like other JavaScript or jQuery that runs in the browser.

Node is code that runs on the server. What you've correctly done in your app.js is have the server send the index.html file to the browser. But after that point all that the browser knows about and has access to is the index.html file, it is a separate file and context and so has no access to the server anymore.

The only way to have your page call a function on the server would be to create some sort of API where your page sends a separate http request to the server, which then responds with the function's output.

answered Mar 15, 2017 at 10:33

Aron

9,3187 gold badges37 silver badges60 bronze badges

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

Comments

ponury-kostek · Accepted Answer · 2017-03-15 10:35:54Z

2

index.html runs in browser so you can't call getData() function that is defined on server side in app.js

Move getData() function body to index.html as Nenad Vracar suggests or use some kind of API for client-server communication.

code moved to index.html

<html>
<body>
<script>
    function getData() {
        var text="Hello";
        document.querySelector('#input_id').value = text;
    }
</script>
<div class="jumbotron"  style="padding:40px;">
    <h1>Hello!!!</h1>
    <div>
        <button type="submit" onclick="getData();">Call</button>
        <input type="text" id="input_id">
    </div>
</div>
</div>
</body>
</html>

edited Mar 15, 2017 at 10:35

answered Mar 15, 2017 at 10:27

ponury-kostek

8,0835 gold badges27 silver badges33 bronze badges

1 Comment

user7350714 Over a year ago

Ok..got it I had 2 questions how to make that var text displayed in input box onclick of button..Other how can I create client side js file to add that function in it.

Collectives™ on Stack Overflow

How to call a function from index.html to app.js file in node js application javascript

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related