CODEWITHSUNDEEP
javascripthtml
Nischith Naik
Nischith Naik

Reputation: 51

Changing the text of button dynamically contaning span class

I am facing a problem where I have a button in which I am changing the text of it based on the click.
This button has a span attached to it.
But when I change the value of innerHTML/innerText of the button, the span gets removed and the picture thats supposed to come with the button does not appear.
I have tried adding "className" and 'classList.add("text")', but its just throwing an error.
So I wanted to know if there is any way I could only change the text of the button without effecting the button's span element.

Thank you in advance :)

This is how the button is declared

<button id='btnShow' class='btn btn-info pull-right' onclick='pingall()'><i class='fa fa-desktop'></i>Show All</button>

I'm using javascript and changing the value of text by

var showallButton=document.getElementById('btnShow');
if((showallButton.innerText).trim()=="Show All"){        
    showallButton.innerHTML="Hide All";
}else{
    showallButton.innerHTML="Show All";         
}

Upvotes: 1

Views: 606

Answers (3)

Pranav C Balan
Pranav C Balan

Reputation: 115212

Get the textNode after the i tag and update its content.

function pingall(){
  // get the i tag within button then get the text content
  // after the tag using nextSibling property
  var textNode = document.querySelector('#btnShow i').nextSibling;

  // check textContetnt property for updating or checking
  if ((textNode.textContent).trim() == "Show All") {
    textNode.textContent = "Hide All";
  } else {
    textNode.textContent = "Show All";
  }
}
<button id='btnShow' class='btn btn-info pull-right' onclick='pingall()'><i class='fa fa-desktop'></i>Show All</button>

Upvotes: 2

Webdeveloper_Jelle
Webdeveloper_Jelle

Reputation: 2856

INNERHTML replaces all content inside an HTML element.
So in your case it removes all content including <span> tags and it adds "Hide All" or "Show All".
To only replace the text you can use the ID of your <span> element.

var textNode = document.querySelector('#idofyourspan');

You can also get the next element after your <i> with nextSibling

var textNode = document.querySelector('#btnShow i').nextSibling; // this should be your <span>

Full code:

var textNode = document.querySelector('#btnShow i').nextSibling; // get the next sibling after <i> tag inside button

// check textContetnt property for updating or checking
if ((textNode.textContent).trim() == "Show All") {
  textNode.textContent = "Hide All";
} else {
  textNode.textConten = "Show All";
}
function pingall(){
// your code

}
<button id='btnShow' class='btn btn-info pull-right' onclick='pingall()'><i class='fa fa-desktop'></i>Show All</button>

Upvotes: 0

Emily Roth
Emily Roth

Reputation: 11

This is happening because you have an icon element within the button.

You can update the HTML to:

<button id='btnShow' class='btn btn-info pull-right' onclick='pingall()'><i class='fa fa-desktop'></i><span id="btn-text">Show All</span></button>

And the JS to:

var showallButtonText=document.getElementById('btn-text');
if((showallButtonText.innerText).trim()=="Show All"){        
    showallButtonText.innerHTML="Hide All";
}else{
    showallButtonText.innerHTML="Show All";         
}

Upvotes: 1

Related Questions