We Keep Coding

Why does onclick() function run automatically without clicking [duplicate]

This question already has answers here:
onclick function runs automatically
(4 answers)
Closed 1 year ago.
I am wondering why doStuff() is called without clicking.
function pageReady() {
var buttonBox = document.getElementById("buttonBox");
buttonBox.onclick = doStuff();
function doStuff() {
buttonBox.style.background = "orange";
buttonBox.style.width = "600px";
buttonBox.innerHTML = "<h2>SURPRISE!!</h2>";
}
}

You're invoking the function, you should change
buttonBox.onclick = doStuff()
to
buttonBox.onclick = doStuff;
Now you're passing the function to the handler without invoking it.

How to retrieve all the functions name in a javascript file [duplicate]

This question already has answers here:
Return all of the functions that are defined in a Javascript file
(4 answers)
Closed 3 years ago.
I have a javascript file and in that there are some functions defined in it.
How can i get all the function name defined in that particular js file in an array of string
function getabc1() {
//block of code
}
function getabc2() {
//block of code
}
function getabc3() {
//block of code
}
function getabc4() {
//block of code
}
function getabc5() {
//block of code
}
function getabc6() {
//block of code
}
function getabc7() {
//block of code
}
I need all the 7 functions defined in this particular js file.
Only name of function
It will be great help if someone can help me on this.

You're just gonna inspect the code a little bit, answers in Stackoverflow aren't always meant to give you the exact thing you need. You should learn to derive from it. Looking at the link #AndroidNoobie said, all you had to do is push the key instead of the entire iterated value.
As stated on https://stackoverflow.com/a/11279959/7325182:
Declare it in a pseudo namespace
var MyNamespace = function(){
function getAllFunctions(){
var myfunctions = [];
for (var l in this){
if (this.hasOwnProperty(l) &&
this[l] instanceof Function &&
!/myfunctions/i.test(l)){
myfunctions.push(l);
}
}
return myfunctions;
}
function foo(){
//method body goes here
}
function bar(){
//method body goes here
}
function baz(){
//method body goes here
}
return { getAllFunctions: getAllFunctions
,foo: foo
,bar: bar
,baz: baz };
}();
//usage
var allfns = MyNamespace.getAllFunctions();
console.log(allfns)
//=> allfns is now an array of functions.
// You can run allfns[0]() for example

use variable of 'this' in setInterval [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 4 years ago.
hi I want to use 'this' variable in setInterval in a jquery function
I write '// this code don't work' after don't worked line
(function($)
{
$.fn.rotate=function () {
var counter=0;
var timer=setInterval(function () {
counter++;
var transform='rotate('+counter+'deg)';
$(this).css('transform',transform); // this code dont work
if(counter>=300)
clearInterval(timer);
},1);
return this;
};
$('#socialNetworks i').rotate();
}(jQuery))
thanks Alot

Using the arrow function when defining the function maintains the this context in which the function has been called. Thus you would be able to access this inside the function correctly.
( $ => {
$.fn.rotate=function () {
var counter=0;
var timer=setInterval(function () {
counter++;
var transform='rotate('+counter+'deg)';
$(this).css('transform',transform); // this code dont work
if(counter>=300)
clearInterval(timer);
},1);
return this;
};
$('#socialNetworks i').rotate();
})(jQuery)

Run Function only once in Javascript [duplicate]

This question already has answers here:
Function in JavaScript that can be called only once
(32 answers)
Closed 6 years ago.
Execute function only one time in Javascript, no matter how many times it has been called.
I write the following code, but does not working.
var counter = 0;
if(n.data === YT.PlayerState.BUFFERING) {
setTimeout(function() {
if(counter===0) {
r.frontPlayer.seekTo(10);
counter++;
}}, 2000);
}

Try not to use timeouts, they invite misery and suffering. This is a simple example, I use jquery for attaching the events but the function is independent of jquery. The key thing is using the object, the anonymous function in this case, to track state.
<button id="testButton">
test
</button>
$("#testButton").click(function() {
if (null == this.ran) {
console.log("do something");
this.ran = true;
}
})

Take a look at underscore or lodash's _.once function:
var fn = _.once(function() {
console.log('this will only run once');
});
Or writing it yourself:
var fn = (function() {
var called = false;
var ret;
return function() {
if (called) return ret;
called = true;
// do stuff
// ..
ret = 'some return value';
return ret;
};
})();

Access this in prototype function after a callback [duplicate]

This question already has answers here:
How to access the correct `this` inside a callback
(13 answers)
Closed 7 years ago.
I have following code :
function A() {
this.value = 'a_value';
}
A.prototype.getValue = function(){
console.log(this.value); // got undefined, expected 'a_value'
}
setTimeout(new A().getValue, 100);
why i get this.value as undefined.?
and how how do i access this.value?
EDIT : i am not allowed to change the setTimeout line (last line) of code.

Hint: have you tried console.log(this);?
You are only passing the getValue function to setTimeout, not its context. Something like this would work: setTimeout(function() {new A().getValue();},100); But without changing that last line, there's basically nothing you can do.

you can avoid using the this altogether and not having this kind of problems with the following technique :
var A = function () { // no new no this
var value = 'a_value';
var getValue = function(){
console.log(value);
};
return Object.freeze({
getValue ,
});
};
setTimeout(A().getValue, 100);
or write
var a = new A();
before, and then
setTimeout(a.getValue.bind(a), 100);