ES6 calling method in another class, using modules

Question

I know there is many questions like this asked, but I have been searching for hours and can't find any answers. I have this method, which takes in a parameter, which should be ID of two selects. Using this parameter, I want to determine which select is used and execute the if statement, but to no avail. When I run it, it shows no errors in console in Chrome and it does nothing. Can anyone shed some light on it, this is the method in one export class:

static styleCircle(select) {
    if(this.select === ELEMENTS.ELEMENT_COLOR_SELECT) {
      var getColor = ELEMENTS.ELEMENT_COLOR_SELECT;
      var colorValue = getColor.options[getColor.selectedIndex].value;
      ELEMENTS.ELEMENT_STYLE_CIRCLE.style.backgroundColor = colorValue;
    } else if(select == ELEMENTS.ELEMENT_BORDER_SELECT) {
      var getRadius = ELEMENTS.ELEMENT_BORDER_SELECT;
      var radiusValue = getRadius.options[getRadius.selectedIndex].value;
      ELEMENTS.ELEMENT_STYLE_CIRCLE.style.borderRadius = radiusValue;
    }
  }

This is it being called in another class, on two select elements, and the class is imported at the top of the file:

ELEMENTS.ELEMENT_COLOR_SELECT.onchange = Script.styleCircle(this);
ELEMENTS.ELEMENT_BORDER_SELECT.onchange = Script.styleCircle(this);

ELEMENTS is a file with constants, which are just being used to get ID's from the HTML file. I used other methods like this, with onclick events, but none had parameters, and now I'm stuck here. Thanks in advance.

You should consider using [`addEventListener`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) instead of the old-school "on*" properties. — Heretic Monkey, Feb 20 '19 at 21:38
You are checking `this.select` in the first if, you probably meant just `select`. — Aioros, Feb 20 '19 at 21:42
I tried using addEventListener, still the same issue. Yes, my mistake, just select. — , Feb 20 '19 at 21:46
@LeonGrubisic concerning your last edit, please read this: https://meta.stackexchange.com/a/106812/251777 — Vickel, Feb 21 '19 at 00:11

Jonas Wilms · Accepted Answer · 2019-02-20T22:03:32.990

1

You don't want to call the functions right now but instead you probably want to pass functions. Through that you can access the proper this and pass it to styleCircle:

ELEMENTS.ELEMENT_COLOR_SELECT.onchange = function() {
   Script.styleCircle(this);
};

ELEMENTS.ELEMENT_BORDER_SELECT.onchange =  function() {
  Script.styleCircle(this);
};

Additionally this.select is probably causing you troubles as window.select is undefined.

edited Feb 20 '19 at 22:03

answered Feb 20 '19 at 21:45

Jonas Wilms

106,571
13
98
120

I removed the this. from the select and added an else with console log. I tried your line of code, and when I select from the dropdown it goes to the else part and prints it out, it won't compare. – Feb 20 '19 at 21:51
THANK YOU. It works now. If you were near me I'd buy you a beer. – Feb 20 '19 at 21:57
@leon glad to help :) (and no worries, I got enough beer in the fridge ;)) – Jonas Wilms Feb 20 '19 at 22:02

score 0 · Answer 2 · answered Feb 20 '19 at 21:41

0

First step would be to try debugging and ensure select is equivalent to either of those constants. Make sure you have full branching coverage in your debugging. That would mean start by adding an else statement to that if/else if statement - it's possible that your select is not equal to either constant and so neither branch is run.

answered Feb 20 '19 at 21:41

user2372736

21
2

I added an else to it, and console log in it, and when I reload the page it is printed right away, without selecting the select element. – Feb 20 '19 at 21:49
Ah it also looks like you may need to use [bind](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) for these onChange events: `ELEMENTS.ELEMENT_COLOR_SELECT.onchange = Script.styleCircle.bind(this); ELEMENTS.ELEMENT_BORDER_SELECT.onchange = Script.styleCircle.bind(this);` – user2372736 Feb 20 '19 at 21:58

ES6 calling method in another class, using modules

2 Answers2