HTML button not linking to JavaScript function - javascript

Hey guys just having an issue with my HTML button not actually running my javascript function when clicked on.
The HTML:
<html>
<head>
<meta charset="utf-8">
<title>PROJECT</title>
<script language="javascript" src="Hangman.js"></script>
</head>
<body>
<input id = "Begin" type = "button" value = "Play">
</body>
</html>
And here's the JS:
function start ()
{
document.getElementById("Begin").addEventListener("click",logic,false);
}
function logic ()
{
document.writeln("yo");
}
window.addEventListener("load", start, false);
Sorry if this is an amateur question, it just so happens I'm an amateur. Thanks you guys in advance!

check this jsfiddle
it is fixed
function start ()
{
document.getElementById("Begin").addEventListener("click",logic,false);
}
function logic ()
{
alert();
}
window.onLoad=start();

Related

"x is not a function" in js when using class [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 1 year ago.
I am new to JS and especially class in JS.
I don't fully understand how classes work. Please help me in the following question.
This is a simple page with a button. I want it to run a function (doThis()) after clicking the button. But it gives an error saying the function is not defined.
class Test {
constructor() {
this.button = document.getElementById("but1");
this.button.addEventListener("click", this.butClick);
}
butClick() {
console.log("clicked");
this.doThis();
}
doThis(){
console.log("Inside doThis")
}
}
t1 = new Test();
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button id="but1">Click me</button>
<script src="test.js"></script>
</body>
</html>
this.button.addEventListener("click", this.butClick); should be this.button.addEventListener("click", this.butClick.bind(this));.
Without bind(this), the this inside butClick is just the button element, not the class Test.
class Test {
constructor() {
}
butClick() {
console.log("clicked");
this.doThis();
}
doThis(){
console.log("Inside doThis")
}
}
t1 = new Test();
const button = document.getElementById("but1")
button.addEventListener('click', event => {
event.preventDefault()
// Call doThis method on t1, the instance...
t1.doThis()
})
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<button id="but1">Click me</button>
<script src="test.js"></script>
</body>
</html>
I have done some short and helpful article on using classes in JS, should help, go to the article here.

Firefox incompatibility?

http://ahmedstudio.za.pl/firefoxerror/
It works in chrome, opera but doesn't get along with Firefox.
The whole javascript thing is not applying.
This is directly in my javascript.js:
window.onload = function() {
todo("body", 50);
alert("alert!");
setTimeout(function () {
todo("body", 0);
}, 1000)
}
function todo(element, size) {
//blahblah
}
Even if it doesn't actually solve your problem I'd like to share my findings about replacing event handlers with invalid function calls. I've composed this little fiddle:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
jQuery(function(){
$("body").on("load", function(){
$(this).append("Should not run")
});
});
</script>
</head>
<body onload="doesNotExist()">
</body>
</html>
Firefox, Explorer and Edge actually replace the <body> event handler. However, Chrome ignores the onload="doesNotExist()" and execute previous handler.
In the land of tag soup it's hard to decide which workaround is the correct one but it's definitively a bug that could explain your symptoms.
function load() {
//do stuff
}
and the appropriate
<body onload="load()"> </body>
This runs fine in me. I even tried to create a dummy page with this snippet but could not replicate it.Here is snippet.Since the snippet you shared does not contain jquery , i opt to use same code .
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<script>
window.onload = function(){
_todo({
a:'body',
b:50,
alertFrom:'window.onload'
});
setTimeout(function(){
_todo({
a:'body',
b:0,
alertFrom:'setTimeOut'
});
},1000);
};
function _todo(options){
var a = options.a;
var b = options.b;
var c=options.alertFrom
alert(c +" "+a +" "+b);
};
</script>
</body>
</html>
Also note that there is a importance of semicolon after a function.
Here are couple of snapshots

How to call a function that is in a js file from another js file

I know this question has been answered many times but the solutions in those questions aren't working for me. I have a function in lets suppose, a.js. This function is outside the document.ready function and here is its format:
function thisIsFromAnotherFile(){
alert("This alert is from another js file");
}
I'm calling this function from the other file, b.js this way:
var openFile = function(context){
thisIsFromAnotherFile();
}
openFile is an onclick function.
onclick = "openFile(this)"
When I run this code I'm getting an
Uncaught ReferenceError: thisIsFromAnotherFile is not defined. Please help me out. Thanks.
It seems likely there's a few things you're not telling us.
The following code provides a minimal, functioning example.
file1.html
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
}
</script>
<script src="filea.js"></script>
<script src="fileb.js"></script>
<style>
</style>
</head>
<body>
<button onclick='fromFileA();'>Fire func in filea.js</button>
</body>
</html>
filea.js
function fromFileA()
{
fromFileB();
}
fileb.js
function fromFileB()
{
alert("now in fileb.js");
}
A function cannot be called unless it was defined in the same file or one loaded before the attempt to call it.
You declare function fn1 in File1.js, and then in File2 you can just have fn1();
File1.js
function thisIsFromAnotherFile() {
alert("working");
}
File2.js
function openFile() {
thisIsFromAnotherFile();
}
**HTML**
<html>
<head>
<script src="File1.js" type="text/javascript"></script>
<script src="File2.js" type="text/javascript"></script>
</head>
<body>
<button onclick="openFile()">Click me</button>
</body>
</html>
you need to load a.js before you call the function
<head>
<script type="text/javascript" src="path/to/a.js"></script>
</head>

Why is nothing logged?

I tried to make it so that a string gets logged in the console every time I click on a button. However, nothing is logged. Why so?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function log_a_string_plz() {
console.log("some string i want logged");
}
document.onload = function() {
document.getElementById("my_wonderful_button").onclick = log_a_string_plz;
}
</script>
<title>logging a string test</title>
</head>
<body>
<button id="my_wonderful_button">log a string!</button>
</body>
</html>
I've tried changing event handlers to no avail.
Try:
window.onload = function () {
document.getElementById("my_wonderful_button").onclick = log_a_string_plz;
}
jsFiddle example

JavaScript function problems

I can't get this to display an alert fed as a function argument. I have compared to examples and can't see the problem causing it not to work. I have included my html and JavaScript below, any help in where I'm going wrong will be very gratefully received. Thanks A
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="testjs.js"></script>
</head>
<body>
<div id = "testbed">
<a id = "testlink" href = "#number1">Test click</a>
</div>
</body>
</html>
JavaScript:
$(document).ready(function() {
$.fn.newmodalcontrols = function(modelspec) {
alert(modelspec);
} // end newmodalcontrols
$('#testlink').click(function() {
$(this).parent().newmodelcontrols('number1');
}); // end testlink click function
}); // end ready
You just have a typo. Change newmodelcontrols to newmodalcontrols.
JavaScript
$(document).ready(function () {
$.fn.newmodalcontrols = function (modelspec) {
alert(modelspec);
}
$('#testlink').click(function () {
$(this).parent().newmodalcontrols('number1');
});
});
Update: added a jsfiddle example.
You have a typo: newmodalcontrols and newmodelcontrols are not equivalent (note the a/e): corrected the typo, in a JS Fiddle demo:
$(document).ready(function () {
$.fn.newmodalcontrols = function (modelspec) {
alert(modelspec);
} // end newmodalcontrols
// ^- Should be an 'e'
$('#testlink').click(function () {
$(this).parent().newmodelcontrols('number1');
// ^- Or this should be an 'a'
}); // end testlink click function
}); // end ready
Incidentally, in Chromium, this would have been shown in the Web Inspector's JavaScript console as:
Uncaught TypeError: Object [object Object] has no method 'newmodelcontrols'
Which should have drawn your attention to the name of the method you were using/defining.
You got a typo.
Check out fiddle
http://jsfiddle.net/AUEZJ/
$(document).ready(function () {
$.fn.newmodelcontrols = function (modelspec) {
alert(modelspec);
}; // end newmodalcontrols
$('#testlink').click(function () {
$(this).parent().newmodelcontrols('number1');
}); // end testlink click function
}); // end ready

Categories

Resources