Like/dislike Hyperlink Does Not Work In An Object-oriented Manner?

August 17, 2022 Post a Comment

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.

function Homepage() {

  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 = new Homepage();

window.addEventListener("load", () => {
  homepage.setListeners();
})

<html>

<body>
  <p style="display:block">
    <a id="hyperLike" href="">Like</a>/<a id="hyperDislike" href="" ;>Dislike</a> the game.
  </p>
  <p id="like" style="display:none">
    good
  </p>
  <p id="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

Baca Juga

This is a modification of the code featured in this article.

// Define class
class Homepage {
  // Pass a CSS selector
  constructor(selector) {
    // Reference selector
    const elements = document.querySelectorAll(selector);
    // Get amount of elements
    this.length = elements.length;
    // Merge the constructor and elements
    Object.assign(this, elements);
  }
  // Pass a callback function
  each(callback) {
    // Iterate elements...
    for (let node of Array.from(this)) {
      // ...call callback function fore each element...
      callback.call(node);
    }
    // ...make the method chainable
    return this;
  }
  // Pass event and callback
  bind(event, callback) {
    // Iterate constructor...
    return this.each(function() {
      // ...regiter each element to the event and assign callback
      this.addEventListener(event, callback, false);
    });
  }
};

// Instantiate Homepage class
const likeHate = selector => new Homepage(selector);
// Callback rate()
const rate = e => {
  // Reference clicked element
  const 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/down
    let 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: 700 16px/1.3 Raleway;
}

header {
  font-size: 1.5rem;
  margin: 10px 0;
}

.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>
  <link href="https://fonts.googleapis.com/css?family=Raleway" >
</head>

<body>
  <header>
    <button class='btn' value='Superior'>Like</button>/<button class='btn' value='Inferior'>Hate</button> the game.
  </header>
  <article id="rate" data-icon='' data-rate=''></article>
</body>

</html>

Html5 Code Review

Like/dislike Hyperlink Does Not Work In An Object-oriented Manner?

Solution 1:

Solution 2:

Demo

Post a Comment for "Like/dislike Hyperlink Does Not Work In An Object-oriented Manner?"