calling a html function inside script in external js file

Question

I have written a javascript function inside script tag of html file...

<!DOCTYPE html>
<html>    
<head>
    <title> Sample Application </title>    
</head>    
<body>
    <h1 style="text-align:  left">Test</h1>

    <div id="conversation" style="width: 600px; height: 400px; border: 1px solid #ccc; background-color: #eee; padding: 4px; overflow: scroll"></div>
    <form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
        <input type="text" id="wisdom" size="80" value="" placeholder="Type your issue">
    </form>
    <script type="text/javascript">
// set the focus to the input box
        document.getElementById("wisdom").focus();

        function pushChat() {

            // if there is text to be sent...
            var wisdomText = document.getElementById('wisdom');
            if (wisdomText && wisdomText.value && wisdomText.value.trim().length > 0) {

                // disable input to show we're sending it
                var wisdom = wisdomText.value.trim();
                wisdomText.value = '';
                wisdomText.locked = false;

                showRequest(wisdom);                
                // send it to the Lex runtime
                botaction(wisdom);
            }
            // we always cancel form submission
            return false;
        }                   

        function botaction(action){

        console.log("action: " + JSON.stringify(action));

        switch (action.intentName) {
        case "details":
            var Id      =   action.userid;
            var arguments   = [Id];
            verify(arguments);
            break;


        default:
            console.log('No action  found.');
            console.log('executing the default action based on response');
            break;
            }           
        }
        function verify(arguments){


        }                       
    </script>    
</body>
</html>

i need to move the function verify(arguments) to an external js file.i have to move that because i am calling a nodejs child process which requires a module to be included. How can i move the function to a external js file and subsequently call verify function from html file.

What's the issue? You just need to create a new javascript file and link it in another ` — Jorjon, Jun 18 '18 at 05:38
*"am calling a nodejs child process which requires a module to be included"* - I suspect this question is relevant: https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming — JJJ, Jun 18 '18 at 05:40
i want to call the function of an external js file inside html script tag — sajeet, Jun 18 '18 at 05:42
why don't you just copy and past to a file and include it in head? then you may call the function where ever you want — alireza, Jun 18 '18 at 05:50

score 0 · Accepted Answer · answered Jun 18 '18 at 06:29

Make three files as such. It will solve your issue.

index.html

<!DOCTYPE html>
<html>    
<head>
    <title> Sample Application </title>
    <!-- insert these two lines -->
    <script type="text/javascript" src="verify.js" ></script> 
    <script type="text/javascript" src="filename.js" ></script>
</head>    
<body>
     <h1 style="text-align:  left">Test</h1>
    <div id="conversation" style="width: 600px; height: 400px; border: 1px solid #ccc; background-color: #eee; padding: 4px; overflow: scroll">
    </div>
    <form id="chatform" style="margin-top: 10px" onsubmit="return pushChat();">
       <input type="text" id="wisdom" size="80" value="" placeholder="Type your issue">
    </form>  
</body>
</html>

verify.js

 function verify() {

 }

other.js

document.getElementById("wisdom").focus();

    function pushChat() {

        // if there is text to be sent...
        var wisdomText = document.getElementById('wisdom');
        if (wisdomText && wisdomText.value && wisdomText.value.trim().length > 0) {

            // disable input to show we're sending it
            var wisdom = wisdomText.value.trim();
            wisdomText.value = '';
            wisdomText.locked = false;

            showRequest(wisdom);                
            // send it to the Lex runtime
            botaction(wisdom);
        }
        // we always cancel form submission
        return false;
    }                   

    function botaction(action){

    console.log("action: " + JSON.stringify(action));

    switch (action.intentName) {
    case "details":
        var Id      =   action.userid;
        var arguments   = [Id];
        verify(arguments);
        break;


    default:
        console.log('No action  found.');
        console.log('executing the default action based on response');
        break;
        }           
    }

score -1 · Answer 2 · answered Jun 18 '18 at 05:42

-1

You can just copy paste the function to a .js file (ex:verifys.js) and include the .js file in the HTML using

answered Jun 18 '18 at 05:42

VarunKrish

179
1
9

i can do that..but i want to call that verify.js at a particular point...i just don t want it to simply load it – sajeet Jun 18 '18 at 05:43
If you need to call a JS function from HTML, it should be included upfront. Old browsers allowed dynamic inclusion of scripts. But modern browsers doesn't allow injection of scripts tags using document.CreateElement('Script'..). If you don't want the load the function upfront, convert the function to a server side service and invoke it whenever needed. – VarunKrish Jun 19 '18 at 07:42

calling a html function inside script in external js file

2 Answers2