Mixing
Why isn't my onclick function activating when I press the button?
Why isn't my onclick function activating when I press the button?
I'm changing over from Java to Javascript as I'd like to expand my programming capabilities, and I'm not sure why but I'm having a really hard time adjusting. For example, I'm not even sure why I can't get the Javascript function to run, nevermind actually work the way I want it to.
I feel like I might not have the JS wired up to my HTML document properly, but I have included the correct filename within a script tag, and the two files are within the same folder, so why isn't the JS function even being called?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>To-do Webapp</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<!--<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">-->
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/styling.css">
</head>
<!-- scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
http://script.js
<body>
To-do Webapp
Enter your task into the box below.
</div>
<form>
Button element
</div>
</form>
</body>
JS
function addTask() {
"use strict";
/*global document: false */
document.alert("hello");
}
http://script.js needs to be in either the head or the body, to be valid.– Tieson T.
Jun 29 at 21:32
@bambam So do I getElementById to get the button, then attach an event listener to it outside of any function?
– user9889220
Jun 29 at 21:32
To avoid this sort of trivial issues use dev console in browser and debugger
– OlegI
Jun 29 at 21:33
Don't listen to @bambam, it's fine to use inline javascript... but press f12 to see if there's an error in the console... chances are you'll see "document.alert is not a function"
– JayB
Jun 29 at 21:33
1 Answer
1
It is window.alert("hello");, not document.alert("hello");
window.alert("hello");
document.alert("hello");
And inline script is not recommended, use addEventListener instead
addEventListener
Stack snippet
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelector('button').addEventListener('click', addTask);
});
function addTask() {
"use strict";
/*global document: false */
window.alert("hello");
}
To-do Webapp
Enter your task into the box below.
</div>
<form>
Button element
</div>
</form>
</div>Note, the line adding the event listener needs to be called after DOM loaded, as seen in above code sample, or in a script at the end of the body, as shown in below sample.
body
To-do Webapp
Enter your task into the box below.
</div>
<form>
Button element
</div>
</form>
</div>
document.querySelector('button').addEventListener('click', addTask);
function addTask() {
"use strict";
/*global document: false */
window.alert("hello");
}
I knew it would be something simple. Urgh. Thank you.
– user9889220
Jun 29 at 21:32
also, you aren't closing your container div before the
</body> tag– ps2goat
Jun 29 at 21:32
</body>
@ps2goat Fixed the tag issue in my sample
– LGSon
Jun 29 at 21:37
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
As a rule of thumb, never use inline javascript. Attach eventListener instead.
– bambam
Jun 29 at 21:29