Like/dislike Hyperlink Does Not Work In An Object-oriented Manner?
I'd like to have a like/dislike hyperlink to display different contents on my page: when clicking 'like', displays 'good'; when clicking 'dislike', displays 'bad'. My code is like
Solution 1:
The problem is that this.like inside the likeGame() function is not the same as this.like in the Homepage() function, because a function has its own scope. One way to solve this is to use arrow functions as methods. Now this will always refer to Homepage.
functionHomepage() {
this.like = document.getElementById("like");
this.dislike = document.getElementById("dislike");
this.likeGame = (event) => {
if (this.like.style.display == "none") {
this.dislike.style.display = "none"this.like.style.display = "block";
}
event.preventDefault();
};
this.dislikeGame = (event) => {
if (this.dislike.style.display == "none") {
this.like.style.display = "none"this.dislike.style.display = "block";
}
event.preventDefault();
};
this.setListeners = () => {
console.log('in listen');
document.getElementById("hyperLike").addEventListener("click", this.likeGame);
document.getElementById("hyperDislike").addEventListener("click", this.dislikeGame);
}
}
var homepage = newHomepage();
window.addEventListener("load", () => {
homepage.setListeners();
})<html><body><pstyle="display:block"><aid="hyperLike"href="">Like</a>/<aid="hyperDislike"href="" ;>Dislike</a> the game.
</p><pid="like"style="display:none">
good
</p><pid="dislike"style="display:none">
bad
</p></body></html>Solution 2:
The following demo can bind multiple elements to any applicable event and callback function. The advantage of using this class is that the parameters selector, event, and callback can be anything and there's no extra steps to take for multiple listeners.
Demo
Details are commented in demo
This is a modification of the code featured in this article.
// Define classclassHomepage {
// Pass a CSS selectorconstructor(selector) {
// Reference selectorconst elements = document.querySelectorAll(selector);
// Get amount of elementsthis.length = elements.length;
// Merge the constructor and elementsObject.assign(this, elements);
}
// Pass a callback functioneach(callback) {
// Iterate elements...for (let node ofArray.from(this)) {
// ...call callback function fore each element...
callback.call(node);
}
// ...make the method chainablereturnthis;
}
// Pass event and callbackbind(event, callback) {
// Iterate constructor...returnthis.each(function() {
// ...regiter each element to the event and assign callbackthis.addEventListener(event, callback, false);
});
}
};
// Instantiate Homepage classconstlikeHate = selector => newHomepage(selector);
// Callback rate()constrate = e => {
// Reference clicked elementconst tgt = e.target;
// If the clicked has .btn class...if (tgt.matches('.btn')) {
// ...get the clicked value...const val = e.target.value;
// ...reference article#rate...const rate = document.getElementById('rate');
// ...assign the value of clicked to [data-rate] of #rate
rate.dataset.rate = val;
// If the value of clicked is 'Superior' = thumbs up/downlet icon = val === 'Superior' ? '👍' : '👎';
// Assign icon to [data-icon] of #rate
rate.dataset.icon = icon;
}
}
/*
Call the .bind() method on all .btn and register the click event
to each .btn. Assign rate() as callback function.
*/likeHate('.btn').bind('click', rate);html,
body {
font: 70016px/1.3 Raleway;
}
header {
font-size: 1.5rem;
margin: 10px0;
}
.btn {
border: 0 none transparent;
background: none;
cursor: pointer;
font: inherit;
margin: 0;
}
.btn:hover {
color: blue;
text-decoration: underline;
}
.btn:focus {
outline: none;
}
#rate {
font-size: 1.5rem;
}
#rate::before {
content: attr(data-icon)'\a0';
}
#rate::after {
content: attr(data-rate)'\a0';
}<!DOCTYPE html><html><head><linkhref="https://fonts.googleapis.com/css?family=Raleway" ></head><body><header><buttonclass='btn'value='Superior'>Like</button>/<buttonclass='btn'value='Inferior'>Hate</button> the game.
</header><articleid="rate"data-icon=''data-rate=''></article></body></html>
Post a Comment for "Like/dislike Hyperlink Does Not Work In An Object-oriented Manner?"