How to make a text look one color, and return to the original?

Question

I’m trying to do, a "system" online, offline When the user clicks on "• Online", in which the ball is green, it turns red, and the text updates to "• Offline"

I looked, I tried, I couldn’t find and I couldn’t do... What I did was this:

<a href="#" onclick="myFunction()"><i class="fa fa-circle text-success" id="foo"></i> Online</a>

    <script type="text/javascript">
      var online = 0;

      function myFunction()
        {
            online = 1;
            document.getElementById("foo").style.color = "darkred";

            if (online = 1) {
              document.getElementById("foo").style.color = "darkred";
            } else {
              document.getElementById("foo").style.color = "darkgreen";
            }
        }
    </script>

Answer 1

You can do it this way if you want:

var icone = document.querySelector(".fa");
var texto = document.getElementById("foo");

icone.style.color = "green";  // inicializa com o botão verde
texto.textContent = " Online"; // inicializa com o texto online

function myFunction() {  
  
  if(icone.style.color == "green"){
    icone.style.color = "red";
    texto.textContent = " Offline";
  } else {
    icone.style.color = "green";
    texto.textContent = " Online";
  }
  
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<a href="#" onclick="myFunction()"><i class="fa fa-circle text-success" id="foo"></i></a>

Answer 2

Its function has an error in the if: the comparison operator would be two signals == and not just one (=). In Javascript you compare if one value is equal to another with two == - in some cases up to three: === (see here the operators used in various cases).

Another problem is that within the function you are resetting the value of online for 1, That means he’ll always be 1 in the if next.

Even so, you also need to change the value of the variable online when one of the conditions is met (if...else). At no time is this done, so the value of the variable is always the same.

My suggestion is that you define in CSS the initial color of the link, as well as the spacing of the circle to the text, using a margin-right, so you don’t need to put a space character between the circle and the text.

To change the text, you can use the methods nextSibling.textContent. The nextSibling will select the next node after the circle (in this case, the text). And the textContent will change the text.

To change the color of the link (logo, circle and text together), you can use the method .parentNode. As in the function the selector used is the circle, the .parentNode will select the tag <a> who is the father.

With these fixes, your code could be this way:

var online = 1;

function myFunction(){
   var onOff = document.getElementById("foo");

   if(online == 1){
      online = 0;
      onOff.parentNode.style.color = "darkred";
      onOff.nextSibling.textContent = "Offline";
   }else{
      online = 1;
      onOff.parentNode.style.color = "darkgreen";
      onOff.nextSibling.textContent = "Online";
   }
}

/* seleciona a tag <a> onde o atributo onclick começa com myFunction*/
a[onclick^='myFunction']{
   color: darkgreen;
}

#foo{
   margin-right: 5px;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<a href="#" onclick="myFunction()">
   <i class="fa fa-circle text-success" id="foo"></i>Online
</a>

Answer 3

Using of short-if:

<a href="#" onclick="myFunction(this)"><i class="fa fa-circle text-success MINHA_CLASSE_VERDE" id="foo"></i>Online</a>

<script>
  var online = true;

  function myFunction(e) {
    online = !online;
    e.innerHTML = online ? '<i class="fa fa-circle text-success MINHA_CLASSE_VERDE" id="foo"></i> Online' : '<i class="fa fa-circle text-success MINHA_CLASSE_VERMELHA" id="foo"></i> Offilne';
  }
</script>

---

Demonstration: https://jsfiddle.net/leonardomsnt/mvc082n5/

---

Applying

1. Copy and paste the code

2. Create two classes, MINHA_CLASSE_VERDE and MINHA_CLASSE_VERMELHA

   .MINHA_CLASSE_VERDE { background: darkgreen}
   .MINHA_CLASSE_VERMELHA { background: darkred}
   

---

Recommend: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator