CODEWITHSUNDEEP
javascripthtmlecmascript-6es6-modules
user5382657
user5382657

Reputation:

ES6 calling method in another class, using modules

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.

Upvotes: 0

Views: 88

Answers (2)

Jonas Wilms
Jonas Wilms

Reputation: 138257

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.

Upvotes: 1

user2372736
user2372736

Reputation: 21

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.

Upvotes: 0

Related Questions