Menu
Community /Pin to ProfileBookmark
@daveyerwinJun 10.2016 — #I am trying to do something pretty simple in vanilla JS in order to practice closures.
[COLOR="#0000FF"]Yes, but you are making it way to complicated.
[/COLOR]
It goes like this, user input is cached and returned/displayed to another element.
[COLOR="#0000FF"]Is it returned or displayed, if it is returned what function call is it returned to ?
[/COLOR]
This works good, but I want to run a callback function
[COLOR="#0000FF"]Callback functions are normally associated with async functions.
[/COLOR]
to change the background color of the target,
[COLOR="#0000FF"]How do you determine the target ? Do you mean the event target ?
[/COLOR]
and I just cannot get it to run, I have had it right at one point,
including making the callback optional and checking if the callback argument is a function,
but then i played around some more and cannot replicate the working code anymore.
[COLOR="#0000FF"][COLOR="#0000FF"]Of what function is the callBack an arument ?
[/COLOR] [/COLOR]
[COLOR="#0000FF"]A callback or as it is also known as 'higher-order' function
is implemented like this ...
[/COLOR]
showName('theName', theCallBack);@daveyerwinJun 10.2016 — #@daveyerwinJun 10.2016 — #@daveyerwinJun 11.2016 — #@daveyerwinJun 11.2016 — #
Callback function passed to closure does not run
I am trying to do something pretty simple in vanilla JS in order to practice closures. It goes like this, user input is cached and returned/displayed to another element.
This works good, but I want to run a callback function to change the background color of the target, and I just cannot get it to run, I have had it right at one point, including making the callback optional and checking if the callback argument is a function, but then i played around some more and cannot replicate the working code anymore.
This is the function:
<code>
var link = document.getElementById(“link”);
var getNames = document.getElementById(“getName”);
var lastName = getNames.value;
function showName (lastName, callback) {
var nameIntro = “Your name is “;
function makeFullName () {
return nameIntro + ” ” + lastName;
}
return makeFullName ();
}
link.addEventListener(‘click’,(function(callback){
link.insertAdjacentHTML(‘beforeend’, showName (getNames.value ));
callback();
})
)
</code>
And this is the codepen link
A Pen by damiano
I know this may be an odd question, but can you pass 2 callback functions as arguments at once, and if so, how do it?
Sign in
to post a comment5 Comments(s) ↴
0
@daveyerwinJun 10.2016 — #I am trying to do something pretty simple in vanilla JS in order to practice closures. [/COLOR]
It goes like this, user input is cached and returned/displayed to another element.
[/COLOR]
This works good, but I want to run a callback function
[/COLOR]
to change the background color of the target,
[/COLOR]
and I just cannot get it to run, I have had it right at one point,
including making the callback optional and checking if the callback argument is a function,
but then i played around some more and cannot replicate the working code anymore.
[/COLOR]
is implemented like this ...
[/COLOR]
[CODE]
function theCallBack(){alert('Called Back')}
function showName(name, fn){
alert(name);
if(typeof fn == 'function')fn();
}
[/CODE]showName('theName', theCallBack);
0
@daveyerwinJun 10.2016 — #[CODE]
<a name=link>click me</a>
<input id=getName value=hiyas>
<div id=dsply></div>
<script>
document.anchors[0].addEventListener('click',function(e){
e.preventDefault();
dsply.innerHTML=getName.value;
e.target.style.color='green';
});
</script>
[/CODE]0
@daveyerwinJun 10.2016 — #[CODE]
<a href=: name=link>click me</a>
<input id=getName value=hiyas>
<div id=dsply></div>
<script>
document.anchors[0].addEventListener('click',
(function(){
var a = getName.value;// this line will cache the value
return function b(e){
e.preventDefault();
dsply.innerHTML=a;
e.target.style.color='green';
}
})()
);
</script>
[/CODE]0
@daveyerwinJun 11.2016 — #[CODE]
<a href=: name=link>click me</a>
<input id=getNames value=hiyas>
<div id=dsply></div>
<script>
function showName (lastName, callback) {
var nameIntro = "Your name is ";
function makeFullName () {
callback();
return nameIntro + " " + lastName;
}
return makeFullName;
}
document.anchors[0].addEventListener('click',function(e){
e.preventDefault();
e.target.insertAdjacentHTML('beforeend', (showName (getNames.value,function(){alert('Hello from callback')}))());
} )
</script>
[/CODE]0
@daveyerwinJun 11.2016 — #[CODE]
<a href=: name=link>click me</a>
<input id=getNames value=hiyas>
<div id=dsply></div>
<script>
document.anchors[0].addEventListener('click', showName (getNames.value,displayName));
function showName (lastName,callback) {// value is cached in lastName
var nameIntro = "Your name is ";
function makeFullName (e) {
e.preventDefault();
callback(e,nameIntro + " " + lastName);
return nameIntro + " " + lastName;
}
return makeFullName;
}
function displayName(e,arg){
e.target.insertAdjacentHTML('beforeend', arg);
}
</script>
[/CODE]