javascript - Changing CSS properties of a heading when clicked -

what attempting highlight border of box has been clicked in different colour when selected. have tried use classes in typescript file using document.getelementbyid in selectflight method(which called in flight-viewer.html using (click) shown here:

flight.viewer.component.ts:

@component({     selector: 'flight-viewer',     templateurl: 'app/flight-viewer.html',     styleurls: ['app/flight-viewer.css'] }) export class flightviewercomponent  {     name = 'flightviewercomponent';     errormessage = "";     statevalid = true;     flights: flight[];     selectedflight: flight;     flighttoupdate: flight;     flightclicked = false;     @output()     onflightupdating = new eventemitter<flight>();      constructor(private service: flightservice) {         this.selectedflight = null;         this.flighttoupdate = null;         this.fetchflights();     }      flightselected(selected: flight) {         console.log("setting selected flight to: ", selected.number);         this.selectedflight = selected;     }     flightupdating(selected: flight) {         console.log("setting updateable flight to: ", selected.number);         this.flighttoupdate = selected;     }      updateflight() {         console.log("just selected ", this.selectedflight.number, " update");         this.onflightupdating.emit(this.selectedflight);     }      selectflight(selected: flight) {     console.log("just click on flight ", selected.number, " display");    this.flightclicked = true;    this.selectedflight = selected;     // add 'active' class     alert(document.getelementbyid("getflight"));     document.getelementbyid("getflight").classname = "active"; }      private fetchflights() {         this.selectedflight = null;         this.flighttoupdate = null;         this.service             .fetchflights()             .subscribe(flights => this.flights = flights,                        () => this.raiseerror("no flights found!"));     } } 

flight-viewer.html

<h3>flights </h3> <div >     <ul class= "grid grid-pad">         <a *ngfor="let flight of flights" class="col-1-4">         <li class ="module flight" (click)="selectflight(flight)" id="getflight">                 <h4 tabindex ="0">{{flight.number}}</h4>             </li>         </a>     </ul> </div>   <div class="box" *ngif="flightclicked">     <!--<flight-selected [flight]="selectedflight"></flight-selected>-->           have selected flight: {{selectedflight.number}}<br>           from: {{selectedflight.origin}}<br>           leaving at: {{selectedflight.departure || date }}<br>           going to: {{selectedflight.destination}}<br>           arriving at: {{selectedflight.arrival || date}}<br><br>     <h3><span (click)="updateflight(flight)">update</span></h3>  </div>  <div *ngif="flighttoupdate">     <flight-update [flight]="flighttoupdate"                    (onflightupdated)="updateflight($event)"></flight-update> </div> 

flight-viewer.css:

   h3 {     text-align: center;     margin-bottom: 0; }  h4:focus {     position: relative;     max-height: 120px;     min-width: 170px;     background-color:limegreen; }  ul {     width: 1600px;     overflow-x: scroll;     background: #ccc;     white-space: nowrap;     vertical-align: middle;  } div {     position:absolute;     top:50%;     left:50%;     transform:translate(-50%,-50%); }  li {     display: inline-block;     /* if need ie7 support */     *display: inline;     zoom: 1 }  .module {     padding: 20px;     text-align: center;     color: #eee;     max-height: 120px;     min-width: 120px;     background-color: #607d8b;     border-radius: 2px; }  .active {     padding: 20px;     text-align: center;     color: #eee;     max-height: 120px;     min-width: 120px;     background-color: #607d8b;     border-radius: 2px;     border: 5px solid #73ad21  }  .normal {     padding: 20px;     text-align: center;     color: #eee;     max-height: 120px;     min-width: 120px;     background-color: #607d8b;     border-radius: 2px; } .module:hover {     background-color: #eee;     cursor: pointer;     color: #607d8b; }  .box {     text-align: center;     margin-bottom: 0;     margin: auto;     width: 600px;     position:absolute;     top: 180px;     right: 0;     height: 100px;     border: 5px solid #73ad21;     text-align: center;     display: inline-block; } 

basically, want .module have different border colour when has been clicked. tried implement .active , .normal classes referred in component class not working.

what app looks like:

basically, want whole box highlighted in grey have different border colour, rather small rectangle within box have different border colour.(i achieved using tab index not suffice)

i appreciate on this. cheers.

edit: highlights box when close alert box goes away. how make green outline stays until click different box? cheers

you have written :

document.getelementbyid("module").classname = "active"; 

there no element in html provided id = "module"

//replace :

 <li class ="module flight" (click)="selectflight(flight)">                 <h4 tabindex ="0">{{flight.number}}</h4>             </li> 

with

<li class ="module flight" (click)="selectflight(flight)" id="getflight">                 <h4 tabindex ="0">{{flight.number}}</h4>    </li> 

then try :

 document.getelementbyid("getflight").classname = "active";