[Vuejs]-Change text in button with javascript vanilla

by

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>

0👍

This is very simple. Use the codes below:

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

Leave a comment