change text in button with javascript vanilla

Question

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

if it's using *vue* it's not vanilla anymore. maybe the library overwrites your dom change — IT goldman, Jun 27 '23 at 15:32
@ITgoldman i´m using vue to do all logic, but any function to play with dom i need javascript... — scorpions77, Jun 27 '23 at 15:53

score 0 · Answer 1 · answered Jun 27 '23 at 15:32

0

This is very simple. Use the codes below:

document.querySelector('.deleteCoholder').addEventListener('click', function(){
    document.querySelector('#coholder-tab').innerHTML = "AÑADIR COTITULAR";
})

answered Jun 27 '23 at 15:32

Md. Rakibul Islam

2,140
1
7
14

thanks for your response! but it´s not usefull for my – scorpions77 Jun 27 '23 at 15:52

score 0 · Accepted Answer · answered Jun 27 '23 at 15:41

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>

thanks for your response, it´s very good – scorpions77 Jun 27 '23 at 15:53 — scorpions77, Jun 27 '23 at 15:53

change text in button with javascript vanilla

2 Answers2