I have the following in my html
<html>
<body>
<script type="text/javascript">
var hccid=98964571;
function add_chatinline(){
var nt=document.createElement("script");
nt.async=true;
nt.src="http://localhost/ll.js";
var ct=document.getElementsByTagName("script")[0];
ct.parentNode.insertBefore(nt,ct);
console.log("state is ", SORCHAT)//SORCHAT is not defined
}
add_chatinline();
</script>
</body>
</html>
On the ll.js i have
var SORCHAT = SORCHAT || (function () {
return {
init: function (Args) {
console.log("hash is ", Args)
},
};
}());
But now am getting an error of SORCHAT is not defined.
By adding window.onload that is
<script>
window.onload = function(){
SORCHAT.init(12736474676); //this works
}
</script>
But whenever i include another javascript file with window.onload function the SORCHAT.init is not executed.
What am i missing.
You are probably overwriting the window.onload when using it multiple times. You can prevent that with the help of the addEventListener-function.
window.onload = function () {
console.log('onload #1');
}
window.onload = function () { // This replaces the first onload (#1)
console.log('onload #2');
}
window.addEventListener('load', function () {
console.log('onload #A');
});
window.addEventListener('load', function () {
console.log('onload #B');
});
Related
I just started learning about callback functions. Unfortunately I can't make this altered sample-code work.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready( function() {
$(".closebtn").click(function(){
function1(someVariable, function() {
function2(someOtherVariable);
});
});
function function1(param, callback) {
alert("Erste Funktion");
callback();
}
function function2(param) {
alert("Zweite Funktion");
}
})
</script>
When I click on the button nothing happens. Can anyone help?
Your example works for me. Let me know what you think:
// these need to be defined
var someVariable = 'example value';
var someOtherVariable = 'example value';
$(document).ready(function() {
$(".closebtn").click(function() {
function1(someVariable, function() {
function2(someOtherVariable);
});
});
function function1(param, callback) {
console.log("Erste Funktion");
callback();
}
function function2(param) {
console.log("Zweite Funktion");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="closebtn">Close</button>
I am trying to call my JavaScript Function from my jQuery Function, but it does not seem to be calling the function showMain() at the end of the jQuery.
See below: I am trying to Call the showMain() function at the end of the .click function.
Code:
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function() {
$("#welcomeText").fadeOut(2000);
},1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
function showMain() {
var main= document.getElementById("mainDiv");
main.style.display = 'block';
You should use an anonymous function.
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function () {
$("#welcomeText").fadeOut(2000);
}, 1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
});
var showMain = function () {
var main = document.getElementById("mainDiv");
main.style.display = 'block';
};
There is a mistake with your function definition. Please use the closing "}" bracket after the function.
I am trying to call my JavaScript Function from my jQuery Function, but it does not seem to be calling the function showMain() at the end of the jQuery.
See below: I am trying to Call the showMain() function at the end of the .click function. Code:
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function() {
$("#welcomeText").fadeOut(2000);
},1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
function showMain() {
var main= document.getElementById("mainDiv");
main.style.display = 'block';
}
Runnable Code:
$(document).ready(function () {
$('.slideshowExit').click(function () {
setTimeout(function () {
$("#welcomeText").fadeOut(500);
}, 1000);
$("#welcomePage").css("display", "none");
//The function I am trying to Call
showMain();
});
})
function showMain() {
var main = document.getElementById("mainDiv");
main.style.display = 'block';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="slideshowExit">
Click Here
</div>
<div id="mainDiv">
<div id="welcomeText">Welcome to India</div>
</div>
I'm trying to implement clojure in javascript. Can anyone see what the problem is?
var a = (
function()
{
var privateFunction = function()
{
alert('Hello');
}
var OsmanFunction = function()
{
alert('Osman');
}
return
{
publicFunction: function()
{
privateFunction();
}
OsmanFunction: function()
{
OsmanFunction();
}
}})();
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p> Please hit me</p>
</body>
</html>
You need formatting your code. Really.
var a = (
function () {
var privateFunction = function () {
alert('Hello');
};
var OsmanFunction = function () {
alert('Osman');
};
return {
publicFunction: function() {
privateFunction();
},
OsmanFunction: function() {
OsmanFunction();
}
};
})();
document.getElementById("hitme").addEventListener('click', a.OsmanFunction);
This is working version.
But... in your code:
return
{
You can't transfer return object to the next line.
You have no "," on return object between functions
{
publicFunction: function()
{
privateFunction();
}
OsmanFunction: function()
{
OsmanFunction();
}
}
a is not defined.
Please, in fature be attentive to your code, you make code for an other developers, who will support your project, not for machines.
Your function is returning undefined (returning nothing, which is undefined in js). The lines:
return
{
publicFunction: function()
{
privateFunction();
},
OsmanFunction: function()
{
OsmanFunction();
}
}
Is interpreted as:
return;
{
publicFunction: function()
{
privateFunction();
},
OsmanFunction: function()
{
OsmanFunction();
}
};
Therefore it is equivalent to:
return undefined;
{
publicFunction: function()
{
privateFunction();
},
OsmanFunction: function()
{
OsmanFunction();
}
};
Be very careful with line breaks in javascript. If possible use a coding convention that avoids this kind of mistake. There are several coding conventions that work. Google "Crockford convention" or "standard.js". Either convention work so choose one that you like.
Anyway. I'd suggest you don't start an open brace { in a new line if possible. Get used to starting a brace at the end of the line. It avoids this error.
I think it was just poor formatting, but this is I think what your trying to achieve.
function Test(){
var privateFunction = function(){
alert('Hello');
}
var OsmanFunction = function(){
alert('Osman');
}
return {
publicFunction: privateFunction //NB This is no longer private if you expose it
, OsmanFunction: OsmanFunction
}
};
var tester = Test();
var btn = document.getElementById('hitme');
btn.addEventListener('click', function(e){
e.preventDefault();
tester.OsmanFunction()
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p> Please hit me</p>
</body>
</html>
Try following code, you missed comma between "publicFunction" and "OsmanFunction" when these returning:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"> </script>
<script>
a = (
function() {
var privateFunction = function() {
alert('Hello');
}
var OsmanFunction = function() {
alert('Osman');
}
return {
publicFunction: function() {
privateFunction();
},
OsmanFunction: function() {
OsmanFunction();
}
}
})();
</script>
</head>
<body>
<p> Please hit me</p>
</body>
</html>
I've written a basic page in html, putting this in the head:
<script type="text/javascript" src="scripts/main.js"></script>
and the contents of my main.js are extremely simple:
var main = {
onload : function() {
alert("HI");
}
showSurprise : function() {
alert("HI");
}
}
window.onload = main.onload;
however, it seems that having these two functions exist at the same time causes neither of them to work, whether I set window.onload to the onload or the showSurprise function. If I delete one of them, it works fine.
You have syntax error. It should be:
var main = {
onload: function() {
alert("HI");
},
showSurprise: function() {
alert("HI");
}
};
I hope this is what you are looking for
var main = {
onload: function() {
alert("HI");
},
showSurprise: function() {
alert("HI");
}
};
window.onload = main.onload();
You should pass it as a function.
here's my basic code:
JS:
jQuery(function($)
{
function MyTest() {}
MyTest.prototype =
{
myMethod: function()
{
$(this).append("<div id='myId'></div>");
}
}
$(document).ready(function()
{
var myTest1 = new MyTest();
$("#anelement").click(function()
{
myTest1.myMethod();
});
});
});
HTML:
<div id='anelement'></div>
Clicking on "anelement", JS console returns:
TypeError: e is undefined ... jquery.min.js (line 5)
...and it doesn't append "myId" - why?
Thanks
You need to somehow pass the clicked element into your method. Here is one way to do it:
jQuery(function ($) {
function MyTest() {}
MyTest.prototype = {
myMethod: function (el) {
$(el).append("<div id='myId'></div>");
}
}
$(document).ready(function () {
var myTest1 = new MyTest();
$("#anelement").click(function () {
myTest1.myMethod(this);
});
});
});
You could also use .call to execute your method with the given context, however you then lose access to instance methods and variables.
jQuery(function ($) {
function MyTest() {}
MyTest.prototype = {
myMethod: function () {
$(this).append("<div id='myId'></div>");
}
}
$(document).ready(function () {
var myTest1 = new MyTest();
$("#anelement").click(function () {
myTest1.myMethod.call(this);
});
});
});
or simply
jQuery(function ($) {
function MyTest() {}
MyTest.prototype = {
myMethod: function () {
$(this).append("<div id='myId'></div>");
}
}
$(document).ready(function () {
var myTest1 = new MyTest();
$("#anelement").click(myTest1.myMethod);
});
});