Why is nothing logged? - javascript

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

Related

Document 'load' event callbacks not called; how did I mess this up?

In this HTML document, in Chrome, none of my load event callbacks are called:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
console.log('just checking');
function someFunction () { console.log('test 3'); }
document.addEventListener('load', () => console.log('test 1'));
document.addEventListener('load', function () { console.log('test 2'); });
document.addEventListener('load', someFunction);
</script>
</head>
<body>
</body>
</html>
However, I can see that they are set in the inspector:
And there are no errors in the console.
I am almost certain this is some trivial error on my part, and I can't figure out what it is.
I spent a fair amount of time searching the internet for reasons, but for the most part every post I found about failed load callbacks generally had to do with accessing the DOM before it was ready, which doesn't really apply here.
I hand-wavily tried setting the defer attribute on the script but it had no effect.
What am I missing here... ?
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function docReady(func) {
document.addEventListener("DOMContentLoaded", function (event) {
func(event);
});
}
function someFunction () { console.log('test 3'); }
docReady(() => console.log('test 1'));
docReady(function () { console.log('test
2'); });
docReady(someFunction);
</script>
</head>
<body>
</body>
</html>
use 'DOMContentLoaded' instead 'load'

HTML button not linking to JavaScript function

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();

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

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

I can't figure out how to get my javascript onclick event to work

When I click on the button nothing happens unless I call the function in the html. I am trying to remove all inline javascript. I have included the commented-out section of html that works. Thanks in advance for the help!
JavaScript:
var welcomeString;
const TEST = 1;
function setWelcomeString() {
"use strict";
welcomeString = prompt("Please enter your name: ", "nobody");
}
function writeOutput() {
"use strict";
document.getElementById("demo").innerHTML = "Hello, " + welcomeString;
}
function main() {
"use strict";
setWelcomeString();
document.getElementById("sayHi").onclick = writeOutput();
}
main();
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>**SET TITLE**</title>
<link href="css/style.css" rel="stylesheet">
<script src="firstScript.js"></script>
</head>
<body>
<h1 id="wiggles">TEMPLATE</h1>
<!--<button id="sayHi" onclick="writeOutput()">Say Hi</button>-->
<button id="sayHi">Say Hi</button>
<p id="demo"></p>
</body>
</html>
When you assign a function as a handler for an event, you need to assign the function itself, not execute the function and assign it's return value as you are doing. Change this:
document.getElementById("sayHi").onclick = writeOutput(); // parens
To this:
document.getElementById("sayHi").onclick = writeOutput; // no parens
Here is a jsfiddle link with a working example.
You have to add your whole code inside load, like this
window.load = function(){
// your javascript here
};
Also, as jbabey mentioned, use either
document.getElementById("sayHi").onclick = function(){ writeOutput();};
Or
document.getElementById("sayHi").onclick = writeOutput;
You have two issues.
The first being covered by jbabey.
The second is that firstScript.js appears before your button. This is problematic as when you are assigning the onClick handler to it. It doesn't exist in the dom.
Try putting the entire main script inside window.onload = function () { ... } or moving it to the bottom of the markup.

Categories

Resources