Inheritation of static function in JS

Question

Say I have four buttons, set out like so:

Click me (button 1) - Or Click me (button 2)

option 1(button 3) - option 2 (button 4)

If I click on button 1 or 2, I want a local variable to be set to which button was pressed.

When I click on either button 3 or 4, I need to access the variable that holds which button was clicked and process it.

I would like to avoid creating variables in the global scope or using more than one. Is this even possible?

What I've Tried:

function setButtonId(i) {
  this.id = i
}
setbuttonId.process = item => {
  console.log(item)
}
//tmpcode

you know, I don't just ask questions to annoy the community, right? I ask questions because I need help, and I can't get unstuck. — J-Cake
– J-Cake, Commented Apr 8, 2018 at 11:08

Jonas Wilms · Accepted Answer · 2018-04-08 11:13:49Z

1

   const logic = {
    id: null,
    setId(i) {
     this.id = i;
    },
    process() {
     console.log(this.id);
    }
 };

And then use it as:

  button1.onclick = () => logic.setId(3);
  button4.onclick = () => logic.process();

But i would actually prefer a non-global outer scope variable:

 {
   let id = null;
   function setId(i){ id = i}
   function process() {
     console.log(id);
   }
 }

answered Apr 8, 2018 at 11:13

Jonas Wilms

139k20 gold badges164 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

J-Cake Over a year ago

Thanks for the straight answer. It worked very well.

t.niese · Accepted Answer · 2018-04-08 11:18:58Z

1

If you want to avoid global variables then you can either use immediate invoked function expression:

(function() {
  var lastId;
  document.getElementById("1").addEventListener('click', () => {
    lastId = 1;
  });

  document.getElementById("2").addEventListener('click', () => {
    lastId = 2;
  });

  document.getElementById("3").addEventListener('click', () => {
    console.log(lastId)
  });

  document.getElementById("4").addEventListener('click', () => {
    console.log(lastId)
  });
}())

<button id="1">1</button><button id="2">2</button><button id="3">3</button><button id="4">4</button>

or let:

{
  let lastId;
  document.getElementById("1").addEventListener('click', () => {
    lastId = 1;
  });

  document.getElementById("2").addEventListener('click', () => {
    lastId = 2;
  });

  document.getElementById("3").addEventListener('click', () => {
    console.log(lastId)
  });

  document.getElementById("4").addEventListener('click', () => {
    console.log(lastId)
  });
}

<button id="1">1</button><button id="2">2</button><button id="3">3</button><button id="4">4</button>

answered Apr 8, 2018 at 11:18

t.niese

41k9 gold badges78 silver badges111 bronze badges

1 Comment

J-Cake Over a year ago

Awesome, thank you! such an approach, I would not have come up with

Collectives™ on Stack Overflow

Inheritation of static function in JS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related