Modify the text on a button using vanilla JavaScript

Question

Modify the text on a button using vanilla JavaScript

Although it may seem like a simple question, I am struggling to change the text on my button.

The code for my button in the web browser console is:

<button class="nav-link active" id="coholder-tab" data-toggle="tab" data-target="#coholder" type="button" role="tab" aria-controls="coholder" aria-selected="true">COTITULAR 1 <i class="fa fa-1x fa-trash ml-3 deleteCoholder" aria-hidden="true"></i></button>

I want to be able to click on deleteCoholder, remove COTITULAR 1 and the trash icon, then set the text to AÑADIR COTITULAR.

To achieve this, I am using a function in Vue and vanilla JavaScript. Here's my code:

<button class="nav-link" id="coholder-tab" data-toggle="tab" data-target="#coholder" type="button" role="tab" aria-controls="coholder" aria-selected="false" @click="changeTab()">AÑADIR COTITULAR</button>

const changeTab = () => {
        let textTab = "COTITULAR 1";
        let tabText = document.getElementById("coholder-tab");
        let coholder_container = document.getElementById("coholder_container");
        let icon = '<i class="fa fa-1x fa-trash ml-3 deleteCoholder" aria-hidden="true"></i>';
        tabText.innerHTML = "COTITULAR 1 " + `${icon}`;
        
        if (coholder_container.classList.contains('d-none')) {
            coholder_container.classList.remove('d-none');
        }

        let trahs = document.getElementsByClassName('deleteCoholder');
        trahs[0].addEventListener('click', function(e){
            document.querySelector('#coholder-tab').innerHTML = 'AÑADIR COTITULAR';

            coholder_container.classList.add('d-none');
        });
    }

I have also tried following this solution, but I still cannot change the text on my button and hide my div. I'm not sure what I'm doing wrong.

Thank you for reading and apologies for my poor English.

javascript vue.js dom addeventlistener jsdom

Answer 1

Answer №1

It seems like this is the solution you've been looking for. Please find the comments provided below to guide you.

// Using .getElementsByClassName() is not recommended due to its performance implications.
const coholder_container = document.getElementById("coholder_container");
const btn = document.getElementById("coholder-tab");

// This code will execute as soon as the page loads.
btn.innerHTML = "COTITULAR 1<i class='fa fa-1x fa-trash ml-3 deleteCoholder' aria-hidden='true'> ICON HERE</i>";

// You don't need to check for a class before removing it. It will be removed if present, otherwise nothing happens.
coholder_container.classList.remove('d-none');

document.querySelector('.deleteCoholder').addEventListener('click', function(e){
  btn.textContent = 'AÑADIR COTITULAR';
  coholder_container.classList.add('d-none');
});

<!-- The omitted coholder_container element has been included here as a placeholder. -->
<div id="coholder_container"></div>

<button class="nav-link active" id="coholder-tab" data-toggle="tab" data-target="#coholder" type="button" role="tab" aria-controls="coholder" aria-selected="true"></button>

Answer 2

It seems like this is the solution you've been looking for. Please find the comments provided below to guide you.

// Using .getElementsByClassName() is not recommended due to its performance implications.
const coholder_container = document.getElementById("coholder_container");
const btn = document.getElementById("coholder-tab");

// This code will execute as soon as the page loads.
btn.innerHTML = "COTITULAR 1<i class='fa fa-1x fa-trash ml-3 deleteCoholder' aria-hidden='true'> ICON HERE</i>";

// You don't need to check for a class before removing it. It will be removed if present, otherwise nothing happens.
coholder_container.classList.remove('d-none');

document.querySelector('.deleteCoholder').addEventListener('click', function(e){
  btn.textContent = 'AÑADIR COTITULAR';
  coholder_container.classList.add('d-none');
});

<!-- The omitted coholder_container element has been included here as a placeholder. -->
<div id="coholder_container"></div>

<button class="nav-link active" id="coholder-tab" data-toggle="tab" data-target="#coholder" type="button" role="tab" aria-controls="coholder" aria-selected="true"></button>

Answer 3

Answer №2

Follow these easy instructions to achieve the desired outcome:

Execute the following codes:

document.querySelector('.deleteCoholder').addEventListener('click', function(){
    document.querySelector('#coholder-tab').innerHTML = "ADD JOINT HOLDER";
})

Answer 4

Follow these easy instructions to achieve the desired outcome:

Execute the following codes:

document.querySelector('.deleteCoholder').addEventListener('click', function(){
    document.querySelector('#coholder-tab').innerHTML = "ADD JOINT HOLDER";
})

Modify the text on a button using vanilla JavaScript

Answer №1

Answer №2

Similar questions

The form inputs within the modal are unresponsive to clicks

"When a Vuex mutation modifies the state, the computed property fails to accurately represent the changes in the markup

Utilize Node.js to efficiently send emails to a group of subscribed clients

What is the interaction between Parse Cloud Code and Parse Server like?

Sort through the data that is already populated and proceed to paginate within Mongodb

Securing child paths in Vue.js

What is the best way to include documentation for custom components using jsDoc?

What are the solutions for resolving the TypeError when undefined is not an object error?

Check the output of the ChildProcess after executing a shell command

Transform an array of objects into a nested tree structure with Javascript

How can I toggle button states within a v-for loop based on input changes in Vue.js?

Update the Material UI input field value using an external JavaScript script

Error in Formatting Labels in CSS

I have implemented a bootstrap modal, but whenever I trigger a function on the JavaScript side, it automatically closes. I am aiming for the modal to remain open

Limit User Input to 30 Characters in Vue.js

Dynamic links within Vue router can cause issues with page reloading and some components not loading correctly

The Formik form is not being populated with data from the API

Issue with rendering HTML tags when replacing strings within Ionic 2 and Angular 2

The Google Maps API allows all markers to be connected to a single infowindow

JavaScript Class Emit Signal for establishing a sequence of interconnected events