Mixing
JS Class binding class variables
1
I have this Javascript class where in construct I initialize some class variable and I bind a click event and I try to get the declared variable if the click method is called, but returns every time undefined
class Tabs {
constructor() {
this.tabLinks = document.querySelectorAll('[data-tab]')
let self = this
if( this.tabLinks.length > 0 ) {
this.tabContainer = document.querySelectorAll('[data-target]')
this.tabLinks.forEach((el) => {
el.addEventListener("click", self.setActiveTab, false);
} )
}
return
}
setActiveTab(e) {
e.preventDefault()
let currentEl = e.target
console.log(currentEl)
console.log(this.tabLinks) // Is undefined
Tabs.tabLinks.forEach((el) => {
el.classList.remove("is-active")
} )
}
}
export default Tabs
what I do wrong in this case?
javascript class variables binding
asked Jan 1 at 21:05
derocchaderoccha
40031029
add a comment |
1
I have this Javascript class where in construct I initialize some class variable and I bind a click event and I try to get the declared variable if the click method is called, but returns every time undefined
class Tabs {
constructor() {
this.tabLinks = document.querySelectorAll('[data-tab]')
let self = this
if( this.tabLinks.length > 0 ) {
this.tabContainer = document.querySelectorAll('[data-target]')
this.tabLinks.forEach((el) => {
el.addEventListener("click", self.setActiveTab, false);
} )
}
return
}
setActiveTab(e) {
e.preventDefault()
let currentEl = e.target
console.log(currentEl)
console.log(this.tabLinks) // Is undefined
Tabs.tabLinks.forEach((el) => {
el.classList.remove("is-active")
} )
}
}
export default Tabs
what I do wrong in this case?
javascript class variables binding
asked Jan 1 at 21:05
derocchaderoccha
40031029
1
Changeself.setActiveTabtothis.setActiveTab.bind(this). You don't need theselfvariable.
– Barmar
Jan 1 at 21:24
thanks a lot for the feedback! Happy new year for you!
– deroccha
Jan 1 at 21:27
add a comment |
1
1
1
I have this Javascript class where in construct I initialize some class variable and I bind a click event and I try to get the declared variable if the click method is called, but returns every time undefined
class Tabs {
constructor() {
this.tabLinks = document.querySelectorAll('[data-tab]')
let self = this
if( this.tabLinks.length > 0 ) {
this.tabContainer = document.querySelectorAll('[data-target]')
this.tabLinks.forEach((el) => {
el.addEventListener("click", self.setActiveTab, false);
} )
}
return
}
setActiveTab(e) {
e.preventDefault()
let currentEl = e.target
console.log(currentEl)
console.log(this.tabLinks) // Is undefined
Tabs.tabLinks.forEach((el) => {
el.classList.remove("is-active")
} )
}
}
export default Tabs
what I do wrong in this case?
javascript class variables binding
asked Jan 1 at 21:05
derocchaderoccha
40031029
I have this Javascript class where in construct I initialize some class variable and I bind a click event and I try to get the declared variable if the click method is called, but returns every time undefined
class Tabs {
constructor() {
this.tabLinks = document.querySelectorAll('[data-tab]')
let self = this
if( this.tabLinks.length > 0 ) {
this.tabContainer = document.querySelectorAll('[data-target]')
this.tabLinks.forEach((el) => {
el.addEventListener("click", self.setActiveTab, false);
} )
}
return
}
setActiveTab(e) {
e.preventDefault()
let currentEl = e.target
console.log(currentEl)
console.log(this.tabLinks) // Is undefined
Tabs.tabLinks.forEach((el) => {
el.classList.remove("is-active")
} )
}
}
export default Tabs
what I do wrong in this case?
javascript class variables binding
javascript class variables binding
asked Jan 1 at 21:05
derocchaderoccha
40031029
asked Jan 1 at 21:05
derocchaderoccha
40031029
asked Jan 1 at 21:05
derocchaderoccha
40031029
asked Jan 1 at 21:05
derocchaderoccha
40031029
asked Jan 1 at 21:05
derocchaderoccha
40031029
40031029
1
Changeself.setActiveTabtothis.setActiveTab.bind(this). You don't need theselfvariable.
– Barmar
Jan 1 at 21:24
thanks a lot for the feedback! Happy new year for you!
– deroccha
Jan 1 at 21:27
add a comment |
1
Changeself.setActiveTabtothis.setActiveTab.bind(this). You don't need theselfvariable.
– Barmar
Jan 1 at 21:24
thanks a lot for the feedback! Happy new year for you!
– deroccha
Jan 1 at 21:27
1
1
Change
self.setActiveTab to this.setActiveTab.bind(this). You don't need the self variable.– Barmar
Jan 1 at 21:24
Change
self.setActiveTab to this.setActiveTab.bind(this). You don't need the self variable.– Barmar
Jan 1 at 21:24
thanks a lot for the feedback! Happy new year for you!
– deroccha
Jan 1 at 21:27
thanks a lot for the feedback! Happy new year for you!
– deroccha
Jan 1 at 21:27
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998931%2fjs-class-binding-class-variables%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53998931%2fjs-class-binding-class-variables%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Change
self.setActiveTabtothis.setActiveTab.bind(this). You don't need theselfvariable.– Barmar
Jan 1 at 21:24
thanks a lot for the feedback! Happy new year for you!
– deroccha
Jan 1 at 21:27