CODEWITHSUNDEEP
javascripthtmlcssarraysbutton
scrummy
scrummy

Reputation: 795

JavaScript onclick change image and increase the counter

I try to make a simple like/dislike function to my page. The image changing is working but the counter not and I do not know why. Any idea how to make it workable? By the way I have read a bunch of questions about like/dislike system with JS but its not really works for me.

const imageChange = document.querySelector('.likeClassQ')
var countL = 0;
var buttonLike = document.getElementById("likeButton");
var displayLike = document.getElementById("likes");
buttonLike.addEventListener('click', () => {
  imageChange.classList.toggle('likeClassFilled')
})
buttonLike.onclick = function() {
if (buttonLike.classList == 'likeClass') {
  countL++;
  buttonLike.classList.add = "likeClassFilled";
} else if (buttonLike.classList == "likeClassFilled") {
  countL--;
  buttonLike.classList.add = "likeClass";
}
displayLike.innerHTML = countL;
}
.likeClass {
        background-color: red;
        background-repeat: no-repeat;
        background-size: contain;
        padding: 10px;
        border: none;
}

.likeClassFilled {
        background-color: green;
}
<span><span id="likes">0</span> Likes</span><br>
<button id="likeButton" class="likeClass likeClassQ">Like</button>

Upvotes: 0

Views: 69

Answers (1)

Hugo G
Hugo G

Reputation: 16494

  1. There is no need to assign a function to onclick and use addEventListener. Just use one and stick to it.

  2. Your CSS classes are all over the place. Use one for the general styling and another one for your state. Or better yet, use the data attribute if the element or maybe even a stylized checkbox for that. Mixing CSS classes and business logic is a slippery slope.

  3. classList has methods like toggle, add and includes, but you have to use those fields as methods and not as simple fields. Also, you can not use the comparison operator (==) with objects. You would only use that on simple values like strings or numbers. You execute functions/methods by writing brackets after the method/function name and passing any parameters in those. When you use the assignment operator (=), you are not calling anything.

  4. Your logic about saving the state and deriving the current state is flawed. I changed it to toggle a class on each click. Hence you will not find any classes being added or removed within the condition.

const imageChange = document.querySelector('.likeClassQ')
var countL = 0;
var buttonLike = document.getElementById("likeButton");
var displayLike = document.getElementById("likes");

buttonLike.onclick = function() {
  if (buttonLike.classList.contains('likeClassFilled')) {
    countL--;
  } else {
    countL++;
  }
  buttonLike.classList.toggle("likeClassFilled");
  displayLike.innerHTML = countL;
}
.likeClass {
        background-color: red;
        background-repeat: no-repeat;
        background-size: contain;
        padding: 10px;
        border: none;
}

.likeClassFilled {
        background-color: green;
}
<span><span id="likes">0</span> Likes</span><br>
<button id="likeButton" class="likeClass likeClassQ">Like</button>

Upvotes: 2

Related Questions