I wanted to know how to make the button change color

Asked

Viewed 64 times

-1

This is the code working without changing color:

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

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

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

    button.addEventListener('click', updateButton);

    function updateButton() {
      if (button.value === 'botao desligado') {
        button.value = 'botao ligado';
        paragraph.textContent = 'botao ligado';
      } else {
        button.value = 'botao desligado';
        paragraph.textContent = 'botao desligado';
      }
    }

    function mostrar(e) {
      if (e.classList.contains("glyphicon-plus")) {
        e.classList.remove("glyphicon-plus");
        e.classList.add("glyphicon-minus");
        $cor = "btn-success";
      } else {
        e.classList.remove("glyphicon-minus");
        e.classList.add("glyphicon-plus");
      }

    }
  </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 tried to put a variable with the color of the button but it does not change. So:

<button name="referencia" type="button" class="btn <?php echo ($cor);?> glyphicon glyphicon-plus" value="botao ligado" onclick="mostrar(this)">
<p>botao ligado</p>
</button>

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

button.addEventListener('click', updateButton);

function updateButton() {
  if (button.value === 'botao desligado') {
    button.value = 'botao ligado';
    paragraph.textContent = 'botao ligado';
    $cor="btn-success";
  } else {
    button.value = 'botao desligado';
    paragraph.textContent = 'botao desligado';
    $cor="btn-danger"; 
  }
}

function mostrar(e) {
  if (e.classList.contains("glyphicon-plus")) { 
    e.classList.remove("glyphicon-plus"); 
    e.classList.add("glyphicon-minus"); 
  } else {
    e.classList.remove("glyphicon-minus"); 
    e.classList.add("glyphicon-plus"); 
  }
 }
</script>

My colleague can do this with input instead of the button

<input type="button" id="button" value="button" style="color:white" onclick="setColor('button', '#101010')" ; />

  <script>
    var count = 1;

    function setColor(btn, color) {
      var property = document.getElementById(btn);
      if (count == 0) {
        property.style.backgroundColor = "green"
        count = 1;
      } else {
        property.style.backgroundColor = "red"
        count = 0;
      }
    }
  </script>
javascript html

  • Please clarify your specific problem or provide Additional Details to Highlight Exactly what you need. As it’s Currently Written, it’s hard to Tell Exactly what you’re asking.

2 answers

-1


You should not mix languages like this. Use Javascript only. Instead of trying to feed this variable you should just add the class to the button button.classList.add("btn-success").

Do not use <p> inside <button> is unnecessary.

<button type="button" class="btn glyphicon glyphicon-plus">
    botao desligado
</button>

<script>
const button = document.querySelector('button');
let buttonOn = false

button.addEventListener('click', () => {
  if (!buttonOn) {
    buttonOn = true;
    button.innerHTML = 'botao ligado';
    button.classList.add("btn-success");
  } else {
    buttonOn = false;
    button.innerHTML = 'botao desligado';
    button.classList.add("btn-danger"); 
  }
})

</script>

Just a simple variable telling if the button is on or not.

  • Vlw friend, got show but ñ worked very well. A colleague managed to do with input I will try to do with button. My colleague’s code:

  • 1

    <input type="button" id="button" value="button" style="color:white" onclick="setColor('button', '#101010')" ; /> <script> var Count = 1; Function setColor(btn, color) { var Property = Document.getElementById(btn); if (Count == 0) { Property.style.backgroundColor = "green" Count = 1; } Else { Property.style.backgroundColor = "red" Count = 0; } } </script>

  • Maybe I didn’t understand you then. @moigamijunior if you need help.

-2

You could also, just set a style for your JS button even, inside your IF existing, with elemento.style.backgroundColor = "COR_DE_SUA_ESCOLHA";.

For example:

function updateButton() {
  if (button.value === 'botao desligado') {
        button.value = 'botao ligado';
        paragraph.textContent = 'botao ligado';

        button.style.backgroundColor = "Green";

      } else {
        button.value = 'botao desligado';
        paragraph.textContent = 'botao desligado';
        
        button.style.backgroundColor = "Red";
    
      }
}

I believe this would be simpler. I hope it helps.

Browser other questions tagged javascript html

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