When the affirmative button is clicked, apply a border and background color

Question

When the affirmative button is clicked, apply a border and background color

I am in the process of creating custom text boxes for user comments. I need help with adding borders and background colors to a box when the user clicks on the YES button, in order to visually indicate which box the click originated from.

Can anyone assist me with this?

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>

javascript angular typescript

Answer 1

Answer №1

Consider implementing the [ngStyle] binding in your HTML code.

One way to do this is:

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

While there are more concise ways to use ngStyle, this method gives you the flexibility to select styles for unclicked box elements as well. You may also want to consider moving the ngStyle value to your component as a string for better readability in the HTML file.

Answer 2

Consider implementing the [ngStyle] binding in your HTML code.

One way to do this is:

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

While there are more concise ways to use ngStyle, this method gives you the flexibility to select styles for unclicked box elements as well. You may also want to consider moving the ngStyle value to your component as a string for better readability in the HTML file.

Answer 3

Answer №2

Utilize AfterViewInit to wait for the component to finish loading. Then, update the styles of each textarea every time the child btn is clicked within the .Submitcomments element.

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 am not well-versed in Angular 2 development, so there may be a more "Angular" way to accomplish this. Nevertheless, this method works for now.

Answer 4

Utilize AfterViewInit to wait for the component to finish loading. Then, update the styles of each textarea every time the child btn is clicked within the .Submitcomments element.

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 am not well-versed in Angular 2 development, so there may be a more "Angular" way to accomplish this. Nevertheless, this method works for now.

Answer 5

Answer №3

Give this solution a try and remember to upvote if it helps. I put effort into this, so your support is appreciated. If it doesn't work for you, no need to upvote. Just trying to help out!

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>

Answer 6

Give this solution a try and remember to upvote if it helps. I put effort into this, so your support is appreciated. If it doesn't work for you, no need to upvote. Just trying to help out!

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>

When the affirmative button is clicked, apply a border and background color

Answer №1

Answer №2

Answer №3

Similar questions

Unable to save and subsequently recover the image

Find the total number of duplicate elements in a JavaScript array

Transform the blob data into an Excel file for easy download, but beware the file is not accessible

Animations in Angular fail to operate within mat-tabs after switching back when custom components are being utilized

Tips for extracting the y-coordinate from a touch event using d3

jquery disable document manipulation function

The data table fails to display updated information from the data source

The hiding/showing of elements is not being executed correctly by jQuery

Is there a way to upload a video, file, and PDF to a database using multer?

Having trouble with submitting the code - need help resolving the issue

What is the best way to combine HTML and JavaScript code within a single JavaScript file?

How come submitting a form without refreshing does not update the database with new values?

Can a strict type be created from a partial type?

Learn the process of automatically copying SMS message codes to input fields in Angular17

"Delving into the intricacies of Angular's factory

Struggling to retrieve CSS property from a child element?

Display a component by selecting a hyperlink in React

How can I iterate over nested objects using ngFor in Angular HTML?

The Issue of Anti Forgery Token Not Functioning Properly with Ajax JSON.stringify Post

The dependency path in the package.json file contains all the necessary files