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

Question

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

Navigation

#1 by (4 votes)
#2 by (3 votes)
#3 by (0 votes)

0

I'm trying to make an "online" system, offline When the user clicks "• Online", where the ball is green, it turns red, and the text updates to "• Offline "

I searched, tried, did not find and could not 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>

javascript

asked by anonymous 22.08.2018 / 00:01

3 answers

Upload a branch already created to BitBucket Web Scraping how to insert result within img src =

score 4 · Answer 1

You can do this 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>

score 3 · Answer 2

Your function has an error in if : the comparison operator would be two == signs and not just one ( = ). In JavaScript you'll 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 redefining the value of online to 1 , it means that it will always be 1 in if following.

Even so, you must also 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 set the initial color of the link in CSS as well as the spacing of the circle to the text using a margin-right , so you do not need to put a space character between the circle and the text. p>

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

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

With these fixes, your code could look like this:

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>

score 0 · Answer 3

Using 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>

Demo: link

Application

Copy and paste the code

Create two classes, MY_CLASSE_VERDE and MY_CLASSE_VERMELHA

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

I recommend: link