Cannot read functions from external javascript file used by html file

Question

I have an index.html file:

<head>
    <title>Jiggle Into JavaScript</title>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>

    <p>Press the buttons to change the box!</p>

    <div id="box" style="height:150px; width:150px; background-color:darkorange; margin:25px"></div>

    <button type="button1" onclick="growFunc()">Grow</button>
    <button type="button2" onclick="blueFunc()">Blue</button>
    <button type="button3" onclick="fadeFunc()">Fade</button>
    <button type="button4" onclick="resetFunc()">Reset</button> 
    <script type="text/javascript" src="javascript.js"></script>
</body>

My javascript.js file looks like this:

function growFunc() {
    document.getElementById("button1").addEventListener("click", 
        function(){document.getElementById("box").style.height = "250px";
    });
}

function blueFunc() {
    document.getElementById("button2").addEventListener("click", 
      function(){document.getElementById("box").style.backgroundColor = "blue";      
    });
}

function fadeFunc() {

    document.getElementById("button3").addEventListener("click", function(){

        document.getElementById("box").style.backgroundColor = "orange"; 

    });     

}

function resetFunc() {
    document.getElementById("button4").addEventListener("click", 
       function(){
        document.getElementById("box").style.height = "150px";
        document.getElementById("box").style.backgroundColor = "darkorange";
       });
}

Both files are in the same directory. When I try to run index.html in Firefox, for example, nothing happens when I click on the buttons. But if I have the functions all in the index.html file(see below), it works. I can't seem to find what's wrong with my code(I'm new at this). Thank you for your help.

<head>
<title>Jiggle Into JavaScript</title>

<p>Press the buttons to move the box!</p>

<div id="box" style="height:150px; width:150px; background-color:darkorange; margin:25px"></div>

<button id="growBtn">Grow</button>
<button id="blueBtn">Blue</button>
<button id="fadeBtn">Fade</button> 
<button id="resetBtn">Reset</button>

<script type="text/javascript">

    document.getElementById("growBtn").addEventListener("click", function(){
        document.getElementById("box").style.height = "250px";
    });

    document.getElementById("blueBtn").addEventListener("click", function(){ 
         document.getElementById("box").style.backgroundColor = "blue";
    });

    document.getElementById("fadeBtn").addEventListener("click", function(){
        document.getElementById("box").style.backgroundColor = "orange";
    });

    document.getElementById("resetBtn").addEventListener("click", function()
        document.getElementById("box").style.height = "150px";
        document.getElementById("box").style.backgroundColor = "darkorange";
    });
</script>

</body>

Satpal · Accepted Answer · 2017-07-06 11:39:00Z

2

You are binding event handler in the inline click handler, thus its having no effect when you click once.

In your javascript file use DOMContentLoaded event to wait for DOM to be loaded completely then bind event handlers

document.addEventListener("DOMContentLoaded", function(event) {
    //Bind event handlers
    document.getElementById("button1").addEventListener("click", function(){
        .....
    });
});

And Get rid of ugly inline event handlers.

edited Jul 6, 2017 at 11:39

answered Jul 6, 2017 at 11:29

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

Comments

яay0be · Accepted Answer · 2017-07-06 11:31:33Z

0

In your functions you're adding some event listeners, that is not useful because when the function is triggered the click has already been performed.

Just apply CSS changes in the functions.

Plus: your buttons do not have an id, but a type. So you can't select them with getElementById.

answered Jul 6, 2017 at 11:31

яay0be

113 bronze badges

2 Comments

Teresa Kropp Over a year ago

I changed this part in index.html: <button id="button1">Grow</button> <button id="button2">Blue</button> <button id="button3">Fade</button> <button id="button4">Reset</button>

Teresa Kropp Over a year ago

javascript.js looks like this now(one button for example): document.addEventListener("DOMContentLoaded", function(event) { //Bind event handler document.getElementById("button1").addEventListener("click", function(){ document.getElementById("box").style.height = "250px"; }); });

Collectives™ on Stack Overflow

Cannot read functions from external javascript file used by html file

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related