Swap out a button for another using JavaScript

Question

Swap out a button for another using JavaScript

I am facing a challenge where I need to replace an active button with a deactivate button. The issue is that when I click on the active button, it does change to the deactivate button as expected. However, clicking again does not switch it back to the active state. Can someone help me out with this problem?

<td class="statusButtons">
         <span><a href="#" class='status activeBtn'>Active</a></span>&nbsp;
         <span><a href="#" class='status editBtn'>Edit</a></span>&nbsp;
         <span><a href="#" class='status deleteBtn'>Delete</a></span>
 </td>

The provided JavaScript code is:

const statusButtons=document.querySelector(".statusButtons");
const status=document.querySelector(".status");
const activeBtn=document.querySelector(".activeBtn");
activeBtn.addEventListener("click",changeA2D);
function changeA2D(){
    activeBtn.style.visiblity='hidden';
    activeBtn.parentElement.innerHTML=`<a href="#" class='status deactiveBtn'>Deactivate</a>`;
}

javascript html css

Answer 1

Answer №1

Instead of modifying the element itself, modify the text inside based on the current state of isActive.

const statusButtons = document.querySelector(".statusButtons");
const status = document.querySelector(".status");
const activeBtn = document.querySelector(".activeBtn");
activeBtn.addEventListener("click", toggleActiveState);

let isActive = true;

function toggleActiveState() {
    isActive = !isActive
    activeBtn.innerText = isActive ? 'Active' : 'Inactive';
}

Answer 2

Instead of modifying the element itself, modify the text inside based on the current state of isActive.

const statusButtons = document.querySelector(".statusButtons");
const status = document.querySelector(".status");
const activeBtn = document.querySelector(".activeBtn");
activeBtn.addEventListener("click", toggleActiveState);

let isActive = true;

function toggleActiveState() {
    isActive = !isActive
    activeBtn.innerText = isActive ? 'Active' : 'Inactive';
}

Answer 3

Answer №2

To improve selection using document.querySelector(), I plan to assign an id to the ActiveBtn element.

<td class="statusButtons">
         <span><a href="#" class='status activeBtn' id ='activeButton'>Active</a></span>&nbsp;
         <span><a href="#" class='status editBtn'>Edit</a></span>&nbsp;
         <span><a href="#" class='status deleteBtn'>Delete</a></span>
    </td>

Next, I will utilize this script to toggle the button:

let activeButton = document.querySelector("#activeButton");
activeButton.addEventListener("click", toggleActiveStatus);

function toggleActiveStatus() {
    activeButton.classList.toggle("activeBtn");
    activeButton.classList.toggle("inactiveBtn")
    
    let buttonText = activeButton.classList.contains("activeBtn") ? "Active" : "Inactive";
    activeButton.innerText = buttonText;
}

An oversight in Dor Ben Itzhak's answer is forgetting to update the class after the button is clicked.

Answer 4

To improve selection using document.querySelector(), I plan to assign an id to the ActiveBtn element.

<td class="statusButtons">
         <span><a href="#" class='status activeBtn' id ='activeButton'>Active</a></span>&nbsp;
         <span><a href="#" class='status editBtn'>Edit</a></span>&nbsp;
         <span><a href="#" class='status deleteBtn'>Delete</a></span>
    </td>

Next, I will utilize this script to toggle the button:

let activeButton = document.querySelector("#activeButton");
activeButton.addEventListener("click", toggleActiveStatus);

function toggleActiveStatus() {
    activeButton.classList.toggle("activeBtn");
    activeButton.classList.toggle("inactiveBtn")
    
    let buttonText = activeButton.classList.contains("activeBtn") ? "Active" : "Inactive";
    activeButton.innerText = buttonText;
}

An oversight in Dor Ben Itzhak's answer is forgetting to update the class after the button is clicked.

Swap out a button for another using JavaScript

Answer №1

Answer №2

Similar questions

POST requests in Angular Universal are making use of the IP address assigned to my server

What is the best way to display the current time (generated through JavaScript) within a designated div element?

Tips for customizing the appearance of a child component using the parent component in Vue.js

To generate a new <div> element by clicking a button and then clicking on it using C# Selenium

Adjust the image's height to adapt to the size of the browser

Refreshing certain sections of a webpage without the need to refresh the entire page

Authorization setup encountered an issue: an unexpected character was found at the beginning of the JSON data on line 1, column

Can you restrict the selection of text to only the current element?

Combining Images Together in JavaScript

What are the steps to changing the navbar's color when scrolling down?

Accessing table cell value when clicked using JavaScript or jQuery

Is it acceptable to manipulate the prevState parameter of the setState function as mutable?

Sending data from PHP to a text file upon clicking a button

Learn how to display a tooltip for every individual point on a Highcharts network graph within an Angular

Incorporate interactive click buttons into your Telegram bot

Using HTML5 to display the {{data}} extracted from a JSON file right in the center of the text

The dropdown button becomes unresponsive when attempting to navigate within it using ajax requests

What is the best way to hide a section of an image using the background of a different div?

What is the best way to eliminate spaces when moving to a new line in HTML?

Is it possible to create interlinked HTML pages from markdown files?