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>
2 Answers 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.
Comments
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.