I can’t change the icon and text inside a button

Asked

Viewed 83 times

-5

Personal how could I make a button that changes text and icon when clicked? and click again return to the original button? could help me

function mostrar(e) {
  if (e.classList.contains("glyphicon-plus")) { //se tem olho aberto
    e.classList.remove("glyphicon-plus"); //remove classe olho aberto
    e.classList.add("glyphicon-minus"); //coloca classe olho fechado
  } else {
    e.classList.remove("glyphicon-minus"); //remove classe olho fechado
    e.classList.add("glyphicon-plus"); //coloca classe olho aberto
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<form method="POST">
  <button type="button" class="btn glyphicon glyphicon-plus" onclick="mostrar(this)"> save </button>
</form>

inserir a descrição da imagem aqui inserir a descrição da imagem aqui

javascript html

  • You are already changing the icons, just change the text, on if/Else just put a e.innerText = ' Texto que quer'

  • 1

    @Leandrade by the image the direction of the icone is also on the wrong side, in fact being glyphicons should use a subelement <i class="glyphicon glyphicon-plus">, after the text and text maybe within a <span>;

  • @Guilhermenascimento I already managed to do brother, only problem is that now I can’t leave the icon on the direct side, how could I do that?

  • @Guilhermenascimento <button type="button" class="btn glyphicon glyphicon-plus" onclick="show(this);incrementClick()"> Save</button> ?

  • Create an element <i> with the classes glyphicon glyphicon-plus and in the element button remove the classes glyphicon glyphicon-plus, the <i> should be on the right side of the text and the text should preferably go within one element <span> so that you can edit it via JS without affecting the element <i>.

  • @Guilhermenascimento I made here man, it did not work, I tried several ways already

Show 1 more comment

2 answers

-3

Opá, I just added a function in the script. Then vc makes the settings to stay in the scheme

<!DOCTYPE html>
<html lang='pt-br'>


<body>

<form>
<button type="button" class="btn glyphicon glyphicon-plus" value="MAIS" 
 onclick="mostrar(this)">
<p>MENOS</p>
</button>


</form>



<script>
const button = document.querySelector('button');
const paragraph = document.querySelector('p');

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'MENOS') {
    button.value = 'MAIS';
    paragraph.textContent = 'MAIS';
  } else {
    button.value = 'MENOS';
    paragraph.textContent = 'MENOS';
  }
}

function mostrar(e) {
  if (e.classList.contains("glyphicon-plus")) { //se tem olho aberto
    e.classList.remove("glyphicon-plus"); //remove classe olho aberto
    e.classList.add("glyphicon-minus"); //coloca classe olho fechado
  } else {
    e.classList.remove("glyphicon-minus"); //remove classe olho fechado
    e.classList.add("glyphicon-plus"); //coloca classe olho aberto
  }
 }
</script>


</body>

<link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
 </script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> 
</script>


</html>

  • I used this site as a reference there are some nice things about it: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/button

-3

Instead of using remove and add, use toggle, it switches between active and disabled. That’s exactly what you’re looking for. On the first click active and the second deactivates, the third click active again and so on. I’ll leave an example here, this function brings up a menu, and when pressed again makes it disappear, I hope it helps.

function aparecerMenu(){
    const nav = document.getElementById('nav');
    nav.classList.toggle('active');
    
}

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.