How can i use variable inside Vanilla JavaScript class to make a function based on boolean-CodePudding

I have a JS Class which is making a function of giving a border to an element when i click to another element. That means when I click on .trigger class element, it will give a border to .content class element. But this function only should be happen based on a Boolean condition.

If Boolean is Yes it should be give border, otherwise it should not work. My code works when I set the method inside the constructor parentheses with this keyword and I can also declare variable there. But I need the method outside the constructor based on my other code.

So how can I possible declare variable outside the constructor and inside the class. I need this using Class approach based on my project.

My code is as follows.

class ParentSelector {
  constructor(trigger, content, condition) {
    this.trigger = document.querySelector(trigger);
    this.content = document.querySelector(content);
  }

  let outline = condition;

  makeOutline() {
    this.trigger.addEventListener("click", (e) => {
      if (condition) {
        e.target.nextElementSibling.style.border = "2px solid red";
      }
    })
  }
}

let a = new ParentSelector(".trigger", ".content", true);
a.makeOutline();

<div class="one">
  <div class="trigger">Trigger</div>
  <div class="content">Content</div>
</div>

CodePudding user response：

First, why some onClick whose only use case is the if-condition? Shouldn't you be like, inside makeOutline() :

makeOutline() {
    if (this.condition) {
      this.trigger.addEventListener("click", (e) => {
        e.target.nextElementSibling.style.border = "2px solid red";
     })
    }
  }

Second, why are you trying to set local variables outside constructor/methods?

UPDATE: I see you're asking about declaring a class field outside of its constructor. In that case, you declare it at the top of the class. The following should work:

class ParentSelector {
  condition = false;

  constructor(trigger, content, condition) {
    this.trigger = document.querySelector(trigger);
    this.content = document.querySelector(content);
    this.condition = condition;
  }

  // ...
}

Feel free to ask me any questions you have about this!

CodePudding user response：

at last i able to find the solution myself after a deep thinking. Following is the solution. Following is the code.

class ParentSelector {
    constructor(trigger, content, condition) {
        this.trigger = document.querySelector(trigger);
        this.content = document.querySelector(content);
        this.outline = condition;
    }
    
        makeOutline(){
        this.trigger.addEventListener("click", (e) => {
            if (this.outline) {
                e.target.nextElementSibling.style.border = "2px solid red";
            }
        })
    }
}

let a = new ParentSelector(".trigger",".content", true);
a.makeOutline();

<div class="one">
<div class="trigger">Trigger</div>
<div class="content">Content</div>
</div>