How to change closed name and red color by open name and blue color when clicking on name?

Asked

Viewed 59 times

1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <style>
        body{
            font-family: 'Roboto', sans-serif;
            color: white;
            font-size:10vw;
        }
        .aberto {background-color: #1a72e6;}
        .fechado {background-color: #ff5252;}
    </style>
</head>
    <body class="fechado">
        <div class="container text-center m-auto p-5">
            <p>Fechado</p>
        </div>
    </body>
</html>

javascript html css

3 answers

2

You can use Jquery and it will look like this

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <title></title>
  <style>
        body{
            font-family: 'Roboto', sans-serif;
            color: white;
            font-size:10vw;
        }
        .aberto {background-color: #1a72e6;}
        .fechado {background-color: #ff5252;}
    </style>
</head>
    <body class="fechado">
        <div class="container text-center m-auto p-5">
            <p id="name">Fechado</p>
        </div>

    <script type="text/javascript">  
         
         $(document).ready(function(){

          $("#name").click(function(){
            
            var name = $("#name").text();

            if(name == 'Fechado'){
                $('#name').text("Aberto");
                $("body").attr('class', 'aberto');
            }else{
                $('#name').text("Fechado");
                $("body").attr('class', 'fechado');
            }

          });
        });
    </script>
    
</body>
</html>

  • 1

    A big hug, thank you!

1

A CSS-only option using label and an input checkbox. This will give much more semantics to your code and still do not need to import jQuery or even worry so the user’s browser JS is enabled or not. In addition, they are items of form and you can manipulate them quietly.

inserir a descrição da imagem aqui

body {
  font-family: 'Roboto', sans-serif;
  color: white;
  font-size: 10vw;
}
p {
  margin: 0;
}
label {
  cursor: pointer;
}
.aberto {
  background-color: #1a72e6;
  display: block;
}
.fechado {
  background-color: #ff5252;
  display: none;
}

#ok {
  display: none;
}
#ok:checked ~ .fechado{
  display: block;
}
#ok:checked ~ .aberto{
  display: none;
}
<form>
  <input type="checkbox" name="" id="ok">
  <label for="ok" class="fechado container text-center m-auto p-5">
    <p>Fechado</p>
  </label>
  <label for="ok" class="aberto container text-center m-auto p-5">
    <p>Aberto</p>
  </label>
</form>

  • 1

    Thank you! A big hug.

  • No problem my dear, I’m glad I could help

0


Using Javascript to check the current situation, is not very dynamic, but works!

document.querySelector('p').addEventListener('click', function() { // evento da tag <p> ao ser clicada!
  if (this.innerHTML == 'Fechado') { // verifica se o conteúdo presente na tag <p> é "Fechado".
    this.innerHTML = 'Aberto'; // sendo assim, ele altera seu conteúdo para "Aberto".
    document.querySelector('body').className = 'aberto'; // incluindo a classe (para assim realizar as alterações, como cores, etc..)
  } else { // caso contrário, seja diferente de "Fechado"
    this.innerHTML = 'Fechado'; // o conteúdo da tag <p> é alterado para "Fechado"
    document.querySelector('body').className = 'fechado'; // incluindo sua classe.
  }
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <style>
        body{
            font-family: 'Roboto', sans-serif;
            color: white;
            font-size:10vw;
        }
        .aberto {background-color: #1a72e6;}
        .fechado {background-color: #ff5252;}
    </style>
</head>
    <body class="fechado">
        <div class="container text-center m-auto p-5">
            <p>Fechado</p>
        </div>
    </body>
</html>

I hope you helped him. Good studies!!

  • Thank you very much!

  • Dispose, select my answer as "Accepted and Functional", is below the Votes, next to the answers, on your left. Any questions just talk! strong embrace!

Browser other questions tagged javascript html css

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