Question 195259 in Javascript Question posted in
A very good W3school tutorial can be found here.

change text in button with javascript vanilla

I know that my question it may seem very simple. But i can´t change my text button.

My button in web browser console it´s:

<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 need that when i clicked in deleteCoholder remove COTITULAR 1 and icon trash and set text AÑADIR COTITULAR

To do this i´m doing this, with function in vue and vanilla. My code it´s:

<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');
        });
    }

also i´m tryin with this response but i can´t change my text button and hide my div. I don´t know that i´m doing wrong.

Thanks for readme and sorry for my bad english

Tags:

2

Answers


  1. 0

    This is very simple. Use the codes below:

    document.querySelector('.deleteCoholder').addEventListener('click', function(){
    document.querySelector('#coholder-tab').innerHTML = "AÑADIR COTITULAR";
})
    Login or Signup to reply.
  2. 0

    I think this is what you are after. See comments inline below.

    // Don't use .getElementsByClassName(). It's a legacy API that has performance implications.
const coholder_container = document.getElementById("coholder_container");
const btn = document.getElementById("coholder-tab");

// I think you just want this to run 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>";

// No need to test for a class before removing it. If it's there, it will be removed.
// If not, nothing will happen.
coholder_container.classList.remove('d-none');

document.querySelector('.deleteCoholder').addEventListener('click', function(e){
  btn.textContent = 'AÑADIR COTITULAR';
  coholder_container.classList.add('d-none');
});
    <!-- You didn't include the coholder_container element in your question
     so this is a stand in for that. -->
<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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search