JS Class instance communication
I'm new with js classes and I think I'm not doing it right.
I want to achieve a simple thing here. On one card click I want to hide all other cards. But how can I reach other cards if event is triggered from inside of one of the cards?
class Cards {
constructor(args){
this.list = ;
this.amm = args.amm;
this.createCards();
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
document.body.appendChild(this.el);
}
addEvents(){
let _this = this;
this.el.onclick = function(){
_this.el.style.opacity = 0.7;
_this.hideOtherCards(_this.id);
};
}
hideOtherCards(id){
// how to hide other cards?
}
}
var myCards = new Cards({amm: 5});javascript class
edited Nov 21 at 8:34
connexo
20.4k73554
asked Nov 21 at 7:57
wyy
2311215
add a comment |
I'm new with js classes and I think I'm not doing it right.
I want to achieve a simple thing here. On one card click I want to hide all other cards. But how can I reach other cards if event is triggered from inside of one of the cards?
class Cards {
constructor(args){
this.list = ;
this.amm = args.amm;
this.createCards();
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
document.body.appendChild(this.el);
}
addEvents(){
let _this = this;
this.el.onclick = function(){
_this.el.style.opacity = 0.7;
_this.hideOtherCards(_this.id);
};
}
hideOtherCards(id){
// how to hide other cards?
}
}
var myCards = new Cards({amm: 5});javascript class
edited Nov 21 at 8:34
connexo
20.4k73554
asked Nov 21 at 7:57
wyy
2311215
add a comment |
I'm new with js classes and I think I'm not doing it right.
I want to achieve a simple thing here. On one card click I want to hide all other cards. But how can I reach other cards if event is triggered from inside of one of the cards?
class Cards {
constructor(args){
this.list = ;
this.amm = args.amm;
this.createCards();
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
document.body.appendChild(this.el);
}
addEvents(){
let _this = this;
this.el.onclick = function(){
_this.el.style.opacity = 0.7;
_this.hideOtherCards(_this.id);
};
}
hideOtherCards(id){
// how to hide other cards?
}
}
var myCards = new Cards({amm: 5});javascript class
edited Nov 21 at 8:34
connexo
20.4k73554
asked Nov 21 at 7:57
wyy
2311215
I'm new with js classes and I think I'm not doing it right.
I want to achieve a simple thing here. On one card click I want to hide all other cards. But how can I reach other cards if event is triggered from inside of one of the cards?
class Cards {
constructor(args){
this.list = ;
this.amm = args.amm;
this.createCards();
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
document.body.appendChild(this.el);
}
addEvents(){
let _this = this;
this.el.onclick = function(){
_this.el.style.opacity = 0.7;
_this.hideOtherCards(_this.id);
};
}
hideOtherCards(id){
// how to hide other cards?
}
}
var myCards = new Cards({amm: 5});class Cards {
constructor(args){
this.list = ;
this.amm = args.amm;
this.createCards();
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
document.body.appendChild(this.el);
}
addEvents(){
let _this = this;
this.el.onclick = function(){
_this.el.style.opacity = 0.7;
_this.hideOtherCards(_this.id);
};
}
hideOtherCards(id){
// how to hide other cards?
}
}
var myCards = new Cards({amm: 5});class Cards {
constructor(args){
this.list = ;
this.amm = args.amm;
this.createCards();
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
document.body.appendChild(this.el);
}
addEvents(){
let _this = this;
this.el.onclick = function(){
_this.el.style.opacity = 0.7;
_this.hideOtherCards(_this.id);
};
}
hideOtherCards(id){
// how to hide other cards?
}
}
var myCards = new Cards({amm: 5});javascript class
javascript class
edited Nov 21 at 8:34
connexo
20.4k73554
asked Nov 21 at 7:57
wyy
2311215
edited Nov 21 at 8:34
connexo
20.4k73554
asked Nov 21 at 7:57
wyy
2311215
edited Nov 21 at 8:34
connexo
20.4k73554
edited Nov 21 at 8:34
connexo
20.4k73554
edited Nov 21 at 8:34
connexo
20.4k73554
20.4k73554
asked Nov 21 at 7:57
wyy
2311215
asked Nov 21 at 7:57
wyy
2311215
asked Nov 21 at 7:57
wyy
2311215
2311215
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
It's good practice (encapsulation) to keep the scope of any component limited to itself. That is, a card shouldn't know that, or how many, other cards exist. To keep the cards decoupled, a common way to achieve that is to make use of custom events.
Imagine it like this: A card that is clicked shouts into the room "I was clicked" and relies upon someone hearing that and reacting to that and for that instance to know what to do. If noone reacts, your code still won't throw an error.
For this to work in your scenario, you'd need a host element for the cards as events bubble up the DOM, but don't bubble to siblings.
Long story short, this is what I'd do:
Edit: Actually, the myCards class should be responsible for creating the host element, and listening to card-clicked.
class Cards {
constructor(args){
this.list = ;
this.el = null;
this.amm = args.amm;
this.createCardHost();
}
createCardHost() {
this.el = document.createElement('div');
this.createCards();
this.el.addEventListener('card-clicked', (e) => {
this.list.forEach(card => {card.id === e.detail.id ? card.el.style.opacity = 0.7 : card.el.style.opacity = 0.1})
})
for (const card of this.list) {
this.el.appendChild(card.el)
}
document.body.appendChild(this.el);
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
}
addEvents(){
this.el.addEventListener('click', () => {
this.el.style.opacity = 0.7;
// throw a 'card-clicked' event here
const cardClicked = new CustomEvent('card-clicked', { bubbles: true, cancelable: true, detail: { id: this.id }});
this.el.dispatchEvent(cardClicked);
});
}
}
var myCards = new Cards({amm: 5});answered Nov 21 at 8:16
connexo
20.4k73554
This is nice. Thank You!
– wyy
Nov 21 at 8:26
add a comment |
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
});
}
});
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%2f53407501%2fjs-class-instance-communication%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
It's good practice (encapsulation) to keep the scope of any component limited to itself. That is, a card shouldn't know that, or how many, other cards exist. To keep the cards decoupled, a common way to achieve that is to make use of custom events.
Imagine it like this: A card that is clicked shouts into the room "I was clicked" and relies upon someone hearing that and reacting to that and for that instance to know what to do. If noone reacts, your code still won't throw an error.
For this to work in your scenario, you'd need a host element for the cards as events bubble up the DOM, but don't bubble to siblings.
Long story short, this is what I'd do:
Edit: Actually, the myCards class should be responsible for creating the host element, and listening to card-clicked.
class Cards {
constructor(args){
this.list = ;
this.el = null;
this.amm = args.amm;
this.createCardHost();
}
createCardHost() {
this.el = document.createElement('div');
this.createCards();
this.el.addEventListener('card-clicked', (e) => {
this.list.forEach(card => {card.id === e.detail.id ? card.el.style.opacity = 0.7 : card.el.style.opacity = 0.1})
})
for (const card of this.list) {
this.el.appendChild(card.el)
}
document.body.appendChild(this.el);
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
}
addEvents(){
this.el.addEventListener('click', () => {
this.el.style.opacity = 0.7;
// throw a 'card-clicked' event here
const cardClicked = new CustomEvent('card-clicked', { bubbles: true, cancelable: true, detail: { id: this.id }});
this.el.dispatchEvent(cardClicked);
});
}
}
var myCards = new Cards({amm: 5});answered Nov 21 at 8:16
connexo
20.4k73554
This is nice. Thank You!
– wyy
Nov 21 at 8:26
add a comment |
It's good practice (encapsulation) to keep the scope of any component limited to itself. That is, a card shouldn't know that, or how many, other cards exist. To keep the cards decoupled, a common way to achieve that is to make use of custom events.
Imagine it like this: A card that is clicked shouts into the room "I was clicked" and relies upon someone hearing that and reacting to that and for that instance to know what to do. If noone reacts, your code still won't throw an error.
For this to work in your scenario, you'd need a host element for the cards as events bubble up the DOM, but don't bubble to siblings.
Long story short, this is what I'd do:
Edit: Actually, the myCards class should be responsible for creating the host element, and listening to card-clicked.
class Cards {
constructor(args){
this.list = ;
this.el = null;
this.amm = args.amm;
this.createCardHost();
}
createCardHost() {
this.el = document.createElement('div');
this.createCards();
this.el.addEventListener('card-clicked', (e) => {
this.list.forEach(card => {card.id === e.detail.id ? card.el.style.opacity = 0.7 : card.el.style.opacity = 0.1})
})
for (const card of this.list) {
this.el.appendChild(card.el)
}
document.body.appendChild(this.el);
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
}
addEvents(){
this.el.addEventListener('click', () => {
this.el.style.opacity = 0.7;
// throw a 'card-clicked' event here
const cardClicked = new CustomEvent('card-clicked', { bubbles: true, cancelable: true, detail: { id: this.id }});
this.el.dispatchEvent(cardClicked);
});
}
}
var myCards = new Cards({amm: 5});answered Nov 21 at 8:16
connexo
20.4k73554
This is nice. Thank You!
– wyy
Nov 21 at 8:26
add a comment |
It's good practice (encapsulation) to keep the scope of any component limited to itself. That is, a card shouldn't know that, or how many, other cards exist. To keep the cards decoupled, a common way to achieve that is to make use of custom events.
Imagine it like this: A card that is clicked shouts into the room "I was clicked" and relies upon someone hearing that and reacting to that and for that instance to know what to do. If noone reacts, your code still won't throw an error.
For this to work in your scenario, you'd need a host element for the cards as events bubble up the DOM, but don't bubble to siblings.
Long story short, this is what I'd do:
Edit: Actually, the myCards class should be responsible for creating the host element, and listening to card-clicked.
class Cards {
constructor(args){
this.list = ;
this.el = null;
this.amm = args.amm;
this.createCardHost();
}
createCardHost() {
this.el = document.createElement('div');
this.createCards();
this.el.addEventListener('card-clicked', (e) => {
this.list.forEach(card => {card.id === e.detail.id ? card.el.style.opacity = 0.7 : card.el.style.opacity = 0.1})
})
for (const card of this.list) {
this.el.appendChild(card.el)
}
document.body.appendChild(this.el);
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
}
addEvents(){
this.el.addEventListener('click', () => {
this.el.style.opacity = 0.7;
// throw a 'card-clicked' event here
const cardClicked = new CustomEvent('card-clicked', { bubbles: true, cancelable: true, detail: { id: this.id }});
this.el.dispatchEvent(cardClicked);
});
}
}
var myCards = new Cards({amm: 5});answered Nov 21 at 8:16
connexo
20.4k73554
It's good practice (encapsulation) to keep the scope of any component limited to itself. That is, a card shouldn't know that, or how many, other cards exist. To keep the cards decoupled, a common way to achieve that is to make use of custom events.
Imagine it like this: A card that is clicked shouts into the room "I was clicked" and relies upon someone hearing that and reacting to that and for that instance to know what to do. If noone reacts, your code still won't throw an error.
For this to work in your scenario, you'd need a host element for the cards as events bubble up the DOM, but don't bubble to siblings.
Long story short, this is what I'd do:
Edit: Actually, the myCards class should be responsible for creating the host element, and listening to card-clicked.
class Cards {
constructor(args){
this.list = ;
this.el = null;
this.amm = args.amm;
this.createCardHost();
}
createCardHost() {
this.el = document.createElement('div');
this.createCards();
this.el.addEventListener('card-clicked', (e) => {
this.list.forEach(card => {card.id === e.detail.id ? card.el.style.opacity = 0.7 : card.el.style.opacity = 0.1})
})
for (const card of this.list) {
this.el.appendChild(card.el)
}
document.body.appendChild(this.el);
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
}
addEvents(){
this.el.addEventListener('click', () => {
this.el.style.opacity = 0.7;
// throw a 'card-clicked' event here
const cardClicked = new CustomEvent('card-clicked', { bubbles: true, cancelable: true, detail: { id: this.id }});
this.el.dispatchEvent(cardClicked);
});
}
}
var myCards = new Cards({amm: 5});class Cards {
constructor(args){
this.list = ;
this.el = null;
this.amm = args.amm;
this.createCardHost();
}
createCardHost() {
this.el = document.createElement('div');
this.createCards();
this.el.addEventListener('card-clicked', (e) => {
this.list.forEach(card => {card.id === e.detail.id ? card.el.style.opacity = 0.7 : card.el.style.opacity = 0.1})
})
for (const card of this.list) {
this.el.appendChild(card.el)
}
document.body.appendChild(this.el);
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
}
addEvents(){
this.el.addEventListener('click', () => {
this.el.style.opacity = 0.7;
// throw a 'card-clicked' event here
const cardClicked = new CustomEvent('card-clicked', { bubbles: true, cancelable: true, detail: { id: this.id }});
this.el.dispatchEvent(cardClicked);
});
}
}
var myCards = new Cards({amm: 5});class Cards {
constructor(args){
this.list = ;
this.el = null;
this.amm = args.amm;
this.createCardHost();
}
createCardHost() {
this.el = document.createElement('div');
this.createCards();
this.el.addEventListener('card-clicked', (e) => {
this.list.forEach(card => {card.id === e.detail.id ? card.el.style.opacity = 0.7 : card.el.style.opacity = 0.1})
})
for (const card of this.list) {
this.el.appendChild(card.el)
}
document.body.appendChild(this.el);
}
createCards(){
for(var i=0; i<this.amm; i++){
this.list.push( new Card( {id: i} ) );
}
}
}
class Card {
constructor(args){
this.id = args.id;
this.el = null;
this.createCard();
this.addEvents();
}
createCard(){
this.el = document.createElement("div");
this.el.style.width = "60px";
this.el.style.height = "100px";
this.el.style.backgroundColor = "red";
this.el.style.margin = "5px";
this.el.style.float = "left";
}
addEvents(){
this.el.addEventListener('click', () => {
this.el.style.opacity = 0.7;
// throw a 'card-clicked' event here
const cardClicked = new CustomEvent('card-clicked', { bubbles: true, cancelable: true, detail: { id: this.id }});
this.el.dispatchEvent(cardClicked);
});
}
}
var myCards = new Cards({amm: 5});answered Nov 21 at 8:16
connexo
20.4k73554
edited Nov 21 at 8:29
answered Nov 21 at 8:16
connexo
20.4k73554
answered Nov 21 at 8:16
connexo
20.4k73554
answered Nov 21 at 8:16
connexo
20.4k73554
20.4k73554
This is nice. Thank You!
– wyy
Nov 21 at 8:26
add a comment |
This is nice. Thank You!
– wyy
Nov 21 at 8:26
This is nice. Thank You!
– wyy
Nov 21 at 8:26
This is nice. Thank You!
– wyy
Nov 21 at 8:26
add a comment |
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
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%2f53407501%2fjs-class-instance-communication%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
