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

Dividing an array into categories with typescript/javascript

Display endless data within a set window size

Is there a way to convert datetime format to date in a Vue component?

Runtime Error: Invalid source property detected - Firebase and Next.js collaboration issue

Build a custom Angular2 pipe to convert JSON data into an array through iteration

Talebook: Unable to modify UI theming color

Can someone explain the inner workings of the Typescript property decorator?

Guide on attaching an onclick function to a search bar

Vue application encountering issues with the functionality of the split method in Javascript

Assign the output of a function to a variable

Creating Vue3 Component Instances Dynamically with a Button Click

The method JSON.stringify is not properly converting the entire object to a string

Dealing with a divided image in a separate thread: What you need to know

Deviations in Scriptaculous Callbacks during Movement Effects

What is the process for transferring image attributes to the server via a URL?

What is the best way to incorporate multiple pages into a Node JS and Express application?

Pass data to all routes in ExpressJS

"Customize your text alignment with TinyMCE's align

Implement a grid layout for columns within the profile section

Generating an Array of objects through the use of the each method