Nuno Nuno - 1 year ago 46
HTML Question

Javascript external file not linking correctly

This is my first javascript that I have ever wrote aside from a few alerts and also my first post. So I have created an Html page and a external javascript file. Both files are in the same directory and I have checked the spellings of each file.

Here is the html code:


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

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

<button id="button1" onclick="divGrow">Grow</button>
<button id="button2" onclick="divColor">Blue</button>
<button id="button3" onclick="divFade">Fade</button>
<button id="button4" onclick="divReset">Reset</button>

<script type="text/javascript" src="javascript.js"></script>


and here is the javascript file:

function divGrow() {

alert("This grows the box");
document.getElementById("box").style.width = "300px";
document.getElementById("box").style.height = "300px";


function divColor() {

alert("This changes the Box to Blue");
document.getElementById("box").style.backgroundColor = "Blue";


function divFade() {

alert("This fades the box");
document.getElementById("box").style.opacity = ".5";


function divReset() {

alert("This resets the box")
document.getElementById("box").style.backgroundColor = "Orange"
document.getElementById("box").style.width = "150px";
document.getElementById("box").style.height = "150px";
document.getElementById("box").style.opacity = "0";


Am I missing another link? To make the javascript code work?

Answer Source

You forgot the () at the end of the function names.

 <button id="button1" onclick="divGrow()">Grow</button>
 <button id="button2" onclick="divColor()">Blue</button>
 <button id="button3" onclick="divFade()">Fade</button>
 <button id="button4" onclick="divReset()">Reset</button>