functions in JS files not functioning in external files

Question

Learning JS.. so bare with me.

When I call my function in tag in the HTML body it works without any issue, but if I try to put the data in an external .js file to keep the body clean (practicing for longer functions and functions commonly used) it does not function

Example HTML file snippet of the data:

    <html>
    <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script type="text/javascript" src="login.js"></script>
    </head>
    <body>
<table>
            <tbody>
              <tr>
                <td><label for="email">Email:</label></td>
                <td><input type="email" name="email" id="email"></td>
              </tr>
              <tr>
                <td><label for="password">Password:</label></td>
                <td><input type="password" name="password" id="password"></td>
              </tr>
            </tbody>
          </table> 
            <button type="button" onClick="getLoginValue();">Submit</button>
</body>
</html>

Example JS file

getLoginValue()
{
    var enteredPassword = document.getElementById("password").value;
    var enteredEmail = document.getElementById("email").value;
    alert(enteredEmail+' '+enteredPassword);
}

Example of HTML file that works:

        <html>
        <head>
        <meta charset="utf-8">
        <title>Test</title>
        <script type="text/javascript" src="login.js"></script>
        </head>
        <body>
    <table>
                <tbody>
                  <tr>
                    <td><label for="email">Email:</label></td>
                    <td><input type="email" name="email" id="email"></td>
                  </tr>
                  <tr>
                    <td><label for="password">Password:</label></td>
                    <td><input type="password" name="password" id="password"></td>
                  </tr>
                </tbody>
              </table> 
                <button type="button" onClick="getLoginValue();">Submit</button>
            <script> 
                function getLoginValue(){
    var enteredPassword = document.getElementById("password").value;
    var enteredEmail = document.getElementById("email").value;
    alert(enteredEmail+' '+enteredPassword);        
}
            </script>
    </body>
    </html>

Can you put `` between closing tags of ` – Kerry May 27 '21 at 03:17 — Kerry, May 27 '21 at 03:17
Does not function there either. – John Lee May 27 '21 at 03:20 — John Lee, May 27 '21 at 03:20

score 0 · Answer 1 · answered May 27 '21 at 03:18

0

because your javascript Load before HTML， you can put javascript before /body or use "onload()" wait HTML load

answered May 27 '21 at 03:18

Lang Chen

1

I am not sure what you mean, can you provide a snippet example? I googled it, but all samples i see still put the function in the body and that is not right, – John Lee May 27 '21 at 03:22

score 0 · Answer 2 · answered May 27 '21 at 03:29

window.onload = function(){
getLoginValue()
{
    var enteredPassword = document.getElementById("password").value;
    var enteredEmail = document.getElementById("email").value;
    console.log(enteredEmail+' '+enteredPassword);
}
}

 <html>
    <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script type="text/javascript" src="login.js"></script>
    </head>
    <body>
<table>
            <tbody>
              <tr>
                <td><label for="email">Email:</label></td>
                <td><input type="email" name="email" id="email"></td>
              </tr>
              <tr>
                <td><label for="password">Password:</label></td>
                <td><input type="password" name="password" id="password"></td>
              </tr>
            </tbody>
          </table> 
            <button type="button" onClick="getLoginValue();">Submit</button>
</body>
</html>

score 0 · Accepted Answer · answered May 27 '21 at 03:32

    your external .js content should be :
    
        function getLoginValue(){
        var enteredPassword = document.getElementById("password").value;
        var enteredEmail = document.getElementById("email").value;
        alert(enteredEmail+' '+enteredPassword);
    }
    
    my page:
    
        <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript" src="login.js"></script>
    </head>
    <body>
    <table>
        <tbody>
        <tr>
            <td><label for="email">Email:</label></td>
            <td><input type="email" name="email" id="email"></td>
        </tr>
        <tr>
            <td><label for="password">Password:</label></td>
            <td><input type="password" name="password" id="password"></td>
        </tr>
        </tbody>
    </table>
    <button type="button" onClick="getLoginValue();">Submit</button>
    </body>
    </html>

login.js file:

        function getLoginValue(){
    var enteredPassword = document.getElementById("password").value;
    var enteredEmail = document.getElementById("email").value;
    alert(enteredEmail+' '+enteredPassword);
}

@JohnLee This answer's code is no different than the question's code ***and*** it doesn't have any function call because the button has an attribute event handler. — zer00ne, May 27 '21 at 05:02
no, there is one major difference in this answer in comparison to the real code that fixed the issue... was a total bonehead move on my part.... sometimes a second pair of eyes helps i guess.. getLoginValue() VS function getLoginValue() the missing function declaration was all that was impacting it working. — John Lee, May 29 '21 at 04:13

functions in JS files not functioning in external files

3 Answers3