Why does HTML button doesn't invoke onclick event assigned function

Question

When trying to invoke a JavaScript function of a .js file from .html file the function doesn't being invoked.

Project hierarchy:

html (folder)
- main.html
js (folder)
- script.js

Example #1 - using .html - Works

main.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Main page</title>
    </head>
    <body>
        <label id="label1"></label>
        <input id="text1" type="text"/>
        <button onclick="document.getElementById('label1').innerHTML = document.getElementById('text1').value">Button</button>
    </body>
</html>

Example #2 - using .html and .js - Doesn't work

main.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Main page</title>
    </head>
    <body>
        <label id="label1"></label>
        <input id="text1" type="text"/>
        <button onclick="outputInput()">Button</button>

        <script src="/js/script.js"></script>
    </body>
</html>

script.js

function outputInput(){
    document.getElementById('label1').innerHTML = document.getElementById('text1').value;}

Could be several things. It would be very helpful if you checked for any error in the JavaScript console and made sure that the script is loaded. — Touffy
– Touffy, Commented Nov 21, 2015 at 22:04
Touffy thank you for your answer, how could I check for JavaScript errors? I'm using WebStorm by the way. — Eido95
– Eido95, Commented Nov 21, 2015 at 22:06
Open your webpage in a browser. Depending on the browser you may have to enable dev tools. Then find where your browser has the developer tools / JavaScript console / WebKit inspector… the console will probably also show you if there was a 404 error when trying to retrieve the script. — Touffy
– Touffy, Commented Nov 21, 2015 at 22:09
Touffy thank you for your replay, I navigated to "script" tab when inspecting elements while running the .html and the following error occurred: Failed to load resource: the server responded with a status of 404 (Not Found). I am using Chrome. — Eido95
– Eido95, Commented Nov 21, 2015 at 22:14
Well then, I suspect that your absolute URL in the src attribute is the culprit. Try "../js/script.js" — Touffy
– Touffy, Commented Nov 21, 2015 at 22:15

Touffy · Accepted Answer · 2015-11-21 22:22:35Z

1

In your <script src="/js/script.js"></script>, you're using an absolute URL. Based on further testing, it appears that your "js" folder is not at the root of your website and so it is not found there. Using a relative URL src="../js/script.js" is more tolerant about where you put things.

answered Nov 21, 2015 at 22:22

Touffy

6,63626 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

Why does HTML button doesn't invoke onclick event assigned function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related