JavaScript Subscribe / Unsubscribe Button

Question

JavaScript Subscribe / Unsubscribe Button

I am trying to create a simple JavaScript program that allows users to like and dislike content. However, I am new to JavaScript and finding it a bit challenging. Basically, when the user clicks on the Follow button, the "countF" variable should increase by 1 and the button text should change to "Unfollow". It's a basic program but I'm struggling with making it work in reverse. In other words, when the Unfollow button is clicked, the "countF" should decrease by 1 and the button text should revert back to "Follow". I know it sounds simple, but I just can't seem to figure it out. Any help or ideas on how to complete this task?

var countF = 0;
var btnText = "Unfollow";
var countButton = document.getElementById("followButton");
var displayCount = document.getElementById("followers");
countButton.onclick = function() {
countF++;
followers.innerHTML = countF;
var countButton = document.getElementById("followButton");
countButton.innerHTML = btnText;
if(countButton.innerHTML = btnText) {
countF--;
countButton.innerHTML = "Follow";
}
}

<div id="followers">0</div>
<button id="followButton"></button>

javascript html css arrays linux

Answer 1

Answer №1

If you're looking to improve your understanding of voting systems, I recommend checking out this informative tutorial video: https://www.youtube.com/watch?v=mBPURBO1kD8. Remember, when it comes to implementing a voting system, client-side handling is not enough.

Here's a suggested concept that may be useful:

let likedPost = false

function toggleVote() {
    likedPost ? removeUpvote() : addUpvote()
    likedPost = !likedPost
}

function removeUpvote() {
    //code for removing
    //may require server calls
}

function addUpvote() {
    //code for adding
    //may require server calls
}

Answer 2

If you're looking to improve your understanding of voting systems, I recommend checking out this informative tutorial video: https://www.youtube.com/watch?v=mBPURBO1kD8. Remember, when it comes to implementing a voting system, client-side handling is not enough.

Here's a suggested concept that may be useful:

let likedPost = false

function toggleVote() {
    likedPost ? removeUpvote() : addUpvote()
    likedPost = !likedPost
}

function removeUpvote() {
    //code for removing
    //may require server calls
}

function addUpvote() {
    //code for adding
    //may require server calls
}

Answer 3

Answer №2

Here is a sample code snippet that demonstrates how this can be achieved:

let followerCount = 0;
let followButton = document.getElementById("btnFollow");
let displayFollowers = document.getElementById("followerCount");

followButton.onclick = function() {
  if (followButton.innerText === "Follow") {
    followerCount++;
    followButton.innerText = "Unfollow";
  } else if (followButton.innerText === "Unfollow") {
    followerCount--;
    followButton.innerText = "Follow";
  }
  displayFollowers.innerHTML = followerCount;
}

Make sure to include the following text in your button element:

<button id="btnFollow">Follow</button>

Answer 4

Here is a sample code snippet that demonstrates how this can be achieved:

let followerCount = 0;
let followButton = document.getElementById("btnFollow");
let displayFollowers = document.getElementById("followerCount");

followButton.onclick = function() {
  if (followButton.innerText === "Follow") {
    followerCount++;
    followButton.innerText = "Unfollow";
  } else if (followButton.innerText === "Unfollow") {
    followerCount--;
    followButton.innerText = "Follow";
  }
  displayFollowers.innerHTML = followerCount;
}

Make sure to include the following text in your button element:

<button id="btnFollow">Follow</button>

JavaScript Subscribe / Unsubscribe Button

Answer №1

Answer №2

Similar questions

What purpose does the next() function serve in Express.js?

What is the process for updating the ID within a Select2 ajax script function?

The Node.js Express server does not provide access to certain static files

CSS: Creative ways to switch up background hues within a grid layout

Spin a sphere by clicking on a link using three.js

Navigating Redirects using axios in the Browser

What's the best way to show floating point numbers in a concise format while also maintaining the ability to perform calculations within this Vue app?

What steps can I take to ensure that the v-main element occupies at least 70% of the viewport height in Vuetify?

Utilizing ng-model to control the visibility of a label or anchor tag

Using AJAX to assign PHP session variables

Tips for using JavaScript to set images from Flickr API as img src

Using Double Equal in a JavaScript For Loop

Understanding Node.JS: A Dive into Key Concepts

Component not refreshing when state changes occur

What is the best way to customize the appearance of a toggle switch using useStyles in Material UI, rather than withStyles?

Is the UUID key displayed as an object within a Reactjs prop?

Function that is triggered repeatedly when modifying the state within it

Stop procrastinating and take action before the JavaScript function concludes

Tips for moving an element to the end of an array

How can I customize the color of the check mark symbol in a bootstrap checkbox?