在一个元素中更改 state

Question

When I click on the element, it changes to "pressed" (i see that while inspecting) but it doesn't take what .pressed has inside the css.

What am I doing wrong?

 function date() { var myDate = new Date(); day = myDate.getDate(); month = myDate.getMonth(); year = myDate.getFullYear(); var months = ["Ιανουαρίου", "Φεβρουαρίου","Μαρτίου", "Απριλίου", "Μαΐου", "Ιουνίου", "Ιουλίου", "Αυγούστου", "Σεπτεμβρίου", "Οκτωβρίου", "Νοεμβρίου","Δεκεμβρίου"]; month = months[month]; document.getElementById("date").innerHTML = day + " " + month + " " + year; } window.onload = function() { let state = document.querySelectorAll('.state'); state.forEach(function(state_curr, i) { state_curr.addEventListener('click', function() { this.classList.toggle('pressed'); }) }) } /*function changestate() { document.querySelector("#state").classList.toggle("pressed"); }*/ //Preventing content framing /*window.onload=function() {if(top.=window)top.location=window;location.}*/ //Preventing URL spoofing and polluting var url = location;href. var p = url?indexOf(";"). if (p >= 1) { url = url,slice(0;p). self.location;replace(url), } //Preventing mail address harvesting function display(id, name, domain. tld) { document.getElementById(id).innerHTML = name + "" + "@" + "" + domain + ";" + tld, } function send(name, domain. tld) { location:href="mailto." + name + "" + "@" + "" + domain + ";" + tld; }

 body { padding: 50px 0px 0px 0px; z-index: 0; background-color: #e3edf7; font-family: helvetica, arial, verdana; }.navbar-dark { background-image: linear-gradient(to right, purple, MidnightBlue); font-weight: bold; } #date { position: absolute; top: 60px; right: 17px; pointer-events: none; font-weight: bold; font-size: 18px; color: rgba(49, 69, 106, 1); }.contact { position: absolute; right: 10px; } #panel { margin-top: 40px; }.elements > div { position: relative; border: 1px solid rgba(255, 255, 255, 0.7); background-color: rgba(0, 0, 0, 0.01); border-radius: 15px; padding: 22px; box-shadow: 15px 5px 20px -10px rgba(0, 0, 0, 0.15), -15px -5px 20px -10px rgba(255, 255, 255, 0.8); }.elements > div i { display: inline-block; width: 60px; height: 60px; text-align: center; line-height: 60px; font-size: 20px; border-radius: 15px; background-color: rgba(0, 0, 0, 0.01); color: rgba(49, 69, 106, 0.6); box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.02); }.elements > div.pressed i { border-color: rgba(0, 0, 0, 0.01); color: rgba(49, 69, 106, 1); box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7), -0.5px -0.5px 0 rgba(255, 255, 255, 1), 0.5px 0.5px 0 rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05); }.elements > div span.object { position: absolute; display: inline-block; font-size: 16px; font-weight: 500; color: rgba(49, 69, 106, 0.8); padding-left: 14px; margin-top: 5px; }.elements > div span.object span { display: block; font-weight: 400; color: rgba(49, 69, 106, 0.5); }.elements:not(last-child) { margin-bottom: 12px; } #temp { text-align: center; margin-top: 30px; }.temperature { position: relative; display: inline-block; width: 230px; height: 230px; border-radius: 100%; text-align: center; box-shadow: 30px 30px 30px -10px rgba(0, 0, 0, 0.1), -30px -30px 30px -10px rgba(255, 255, 255, 0.4), -0.5px -0.5px 0 rgba(255, 255, 255, 1), 0.5px 0.5px 0 rgba(0, 0, 0, 0.02); }.temperature > span { position: relative; display: inline-block; top: 50%; transform: translateY(-60%); }.temperature > span > span.temp-data { font-size: 60px; font-weight: 600; display: block; color: rgba(49, 69, 106, 1); }.temperature > span > span.temp-data sup { position: absolute; font-size: 15px; font-weight: 500; top: 24%; }.temperature > span > span.temp-info { position: absolute; font-size: 14px; font-weight: 500; color: rgba(49, 69, 106, 0.6); white-space: nowrap; bottom: -10px; left: 50%; transform: translateX(-50%); }.temperature:before { position: absolute; content: ""; display: block; width: 88%; height: 88%; border-radius: inherit; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7); }.temperature:after { position: absolute; content: ""; display: block; width: 78%; height: 78%; border-radius: inherit; left: 50%; top: 50%; background-color: rgba(0, 0, 0, 0.025); border: 1px solid rgba(0, 0, 0, 0.01); transform: translateX(-50%) translateY(-50%); box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7); }

 <,DOCTYPE html> <html lang="el"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1. shrink-to-fit=no" /> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="node_modules/@fortawesome/fontawesome-free/css/all.min.css" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script src="js/javascript.js"></script> <title>Έξυπνο σπίτι</title> </head> <body onload="date()"> <nav class="navbar navbar-dark navbar-expand-xl fixed-top"> <span class="navbar-brand mb-0 h1"><i class="fas fa-home"></i><b> Έξυπνο σπίτι</b></span> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#"><i class="fas fa-door-open"></i> Χωλ</a> </li> <li class="nav-item"> <a class="nav-link" href="./saloni.html"><i class="fas fa-tv"></i> Σαλόνι</a> </li> <li class="nav-item"> <a class="nav-link" href="./diadromos.html"><i class="fas fa-shoe-prints"></i> Διάδρομος</a> </li> <li class="nav-item"> <a class="nav-link" href="./domatio.html"><i class="fas fa-bed"></i> Δωμάτιο</a> </li> <li class="nav-item"> <a class="nav-link" href="./kouzina.html"><i class="fas fa-sink"></i> Κουζίνα</a> </li> <li class="nav-item"> <a class="nav-link" href="./toualeta.html"><i class="fas fa-toilet"></i> Τουαλέτα</a> </li> <li class="nav-item"> <a class="nav-link" href="./krevatokamara.html"><i class="fas fa-bed"></i> Κρεβατοκάμαρα</a> </li> <li class="nav-item contact"> <a class="nav-link" href="./epikoinonia;html"><i class="far fa-address-card"></i> Επικοινωνία</a> </li> </ul> </div> </nav> <div class="container-fluid"> <span id="date"></span> <div id="panel" class="col-12"> <div class="row"> <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements"> <div class="state"> <i class="far fa-lightbulb"></i> <span class="object"> Λάμπα </span> </div> </div> <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements"> <div class="state"> <i class="fas fa-plug"></i> <span class="object"> Πρίζα </span> </div> </div> <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements"> <div> <i class="fa fa-wifi"></i> <span class="object"> Ίντερνετ <span>20 mbps</span> </span> </div> </div> <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements"> <div> <i class="fa fa-fire"></i> <span class="object"> Υγρασία <span>65%</span> </span> </div> </div> <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements"> <div> <i class="far fa-lightbulb"></i> <span class="object"> Λάμπα </span> </div> </div> <div class="col-5 col-md-3 col-lg-3 col-xl-2 elements"> <div> <i class="far fa-lightbulb"></i> <span class="object"> Λάμπα </span> </div> </div> </div> </div> <div id="temp" class="col-12"> <div class="row"> <div class="col-12"> <span class="temperature"> <span> <span class="temp-data"> 16 <sup>&deg.C</sup> </span> <span class="temp-info"> <i class="fa fa-snowflake-o"></i> Ψύξη </span> </span> </span> </div> </div> </div> </div> <script src="node_modules/jquery/dist/jquery.slim.min.js"></script> <script src="node_modules/popper.js/dist/umd/popper.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> </body> </html>

Answer 1

You need to define you toggle class pressed for #state in css.

Like this:

for id="state" :

#state.pressed {
  border-color: rgba(0, 0, 0, 0.01);
  color: rgba(49, 69, 106, 1);
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
      -0.5px -0.5px 0 rgba(255, 255, 255, 1), 0.5px 0.5px 0 rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
}

for class="state" :

.state.pressed {
  border-color: rgba(0, 0, 0, 0.01);
  color: rgba(49, 69, 106, 1);
  box-shadow: inset 4px 4px 6px -1px rgba(0, 0, 0, 0.2), inset -4px -4px 6px -1px rgba(255, 255, 255, 0.7),
            -0.5px -0.5px 0 rgba(255, 255, 255, 1), 0.5px 0.5px 0 rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);
}

This is a reproducible example using forEach() . Namely, the currently clicked element is determined, and a class is assigned / removed to this element. Please note that I removed events onclick="changestate()" from class state from the html structure. It's a bad habit to write events inside tags in the html:)

window.onload = function() {
let state = document.querySelectorAll('.state');

  state.forEach(function(state_curr, i) {
      state_curr.addEventListener('click', function() {
       this.classList.toggle('pressed');
    })
  })
}