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>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!
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>