单击是按钮时添加边框和背景颜色

Question

I am developing a kind of text boxes for comments. When I click on the YES button I would like the box where the click came from, to have some kind of borders and a background color in order to signal that the click came from that box.

Can someone help me?

BLITZ

code

<div class="Submitcomments" *ngFor="let c of data; let  i = index;">
    <div>
        <div class="row rowComments" style="margin-top: 11px;">
        </div>
        <div class="form-group">
            <textarea  #myinput type="text" class="form-control AreaText" rows="2"></textarea>
        </div>
        <div class="row" style="margin-top: -20px; margin-left: 5px;">
            <button *ngIf="c.currentState=='pause'" class="btn reply" (click)="adjustState(i)">Yes</button>
            <button *ngIf="c.currentState=='start'" class="btn reply1" (click)="adjustState(i)">No</button>
        </div>
    </div>
</div>

Answer 1

You can use use AfterViewInit to wait until the component has loaded. Then just update each textarea styles everytime the child btn is clicked inside of each element .Submitcomments .

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';   

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent implements AfterViewInit {
  ngAfterViewInit() {
    let submitComments = document.querySelectorAll('.Submitcomments');
    [].slice.call(submitComments).forEach((submitComment, index) => {
        submitComment.querySelector('.btn').addEventListener('click', (event) => {
            submitComment.querySelector('textarea').style.border = '1px solid red';
        });
    });
  }

https://stackblitz.com/edit/angular-qe9hac?file=src/app/app.component.ts

NOTE : I'm not an angular 2 developer, so I'm sure there is a more "angular" type of way to do this. But this works for now.

Answer 2

Try to use the [ngStyle] binding in your html.

Something like this:

<textarea #myinput type="text" class="form-control AreaText" rows="2"
  [ngStyle]="{
    'background-color': c.currentState=='start' ? '#daf4d5' : 'initial', 
    'border': c.currentState=='start' ? '1px solid green' : ''
  }">
</textarea>

There are shorter ways to write the ngStyle but this one allows you to choose a style for box elements that aren't clicked too. Also, you might want to move the ngStyle value in your component as a string, and use that instead (to make the html more readable).

Answer 3

try this also don't forget to upvote me if this is what you need becuse this takes time for me to do and i dont have time wasting to do this alot but if this isnt working at all you dont have to upvote me im just saying if it works remember to upvote me

 window.onload = function() { //onclick event document.getElementById("yes").onclick = function fun() { var element = document.getElementById("yes"); element.classList.add("yeep"); element.classList.remove("unk"); } }

 .yeep{ background-color:green ; border-color:limegreen ; border-width:5px; color:white; } .unk{ background-color:darkgray; border-color:gray; border-width:5px; color:white; }

 <button class='unk' id = 'yes'>yes!</button>