how to pass this from onclick event to multiple functions?

Question

i'm trying passing "this" from onclick event to a function and than to pass this to another function, its working on the first function, but "this" not passed to the next function called from the first function ?

this is my code, please advice ?

function hideProcessing(nextThis) {
  nextThis.parentNode.parentNode.style.display = "none";
  nextThis.parentNode.style.display = "block";
}

function showProcessing(param) {
  param.parentNode.parentNode.style.display = "block";
  param.parentNode.style.display = "none";
  var thisElement = this

  setTimeout('hideProcessing(thisElement)', 3000);
}

<div>
  <span id="overlap">show me</span>
  <div id="sendContainer" class="sendContainer">
    <button onclick="showProcessing(this);">send</button>
  </div>
</div>

u have the this stored in param. you made a mistake assigning thisElement = this. also you should not call setTimeout with string, there should be a function as first parameter. in that function you will still have access to 'param' which is your this. — Marcin Malinowski, Sep 07 '17 at 21:12
try this.name or id like that . https://stackoverflow.com/questions/4195970/what-does-this-mean — zod, Sep 07 '17 at 21:14

score 0 · Answer 1 · answered Sep 07 '17 at 21:20

Try setting a timeout with a wrapper function, also this, in the scope of the function, is the window.

Try:

function hideProcessing(nextThis) {
    nextThis.parentNode.parentNode.style.display = "none";
    nextThis.parentNode.style.display = "block";
}

function showProcessing(param) {
    param.parentNode.parentNode.style.display = "block";
    param.parentNode.style.display = "none";

    setTimeout(function(){//wrapper anonymous function
        hideProcessing(param);
    }, 3000);
}

Read this (pun intended) to understand a little more about scope and how and when use this.

score 0 · Answer 2 · edited Sep 08 '17 at 01:32

function hideProcessing(nextThis){
console.log('nextThis', nextThis);
nextThis.parentNode.parentNode.style.display = "none";
nextThis.parentNode.style.display = "block";

}
 
function showProcessing(param){
param.parentNode.parentNode.style.display = "block";
param.parentNode.style.display = "none";

setTimeout(hideProcessing(param), 3000);
}

<div>
  <span id="overlap">show me</span>
    <div id="sendContainer" class="sendContainer"> 
      <button onclick="showProcessing(this);" >send</button>
    </div>
</div>

score 0 · Accepted Answer · answered Sep 07 '17 at 21:22

first you should correct that 'this' in your onclick function to param Secondly call your setTimeout function as following:

setTimeout(function(){
  hideProcessing(thisElement)
}, 3000);

setTimeout function takes a function as an input not a string

DEMO: http://jsbin.com/wopeyosovu/2/edit?html,js,console,output

how to pass this from onclick event to multiple functions?

3 Answers3