0

I am working on a component where I display a series of question and answers on a page, in order to highlight the option that I select for each question I am highlighting the button clicked using dynamic styling but the issue is that it works erratically, it works sometimes and it doesn't(attaching the log screenshot below). I also tried using data-name but that is specific to LWC and has nothing to do with html elements. Any help on this is greatly appreciated. enter image description here

HTML Code

<lightning-layout>
  <lightning-layout-item size="4" >
    <div class="slds-m-around_large slds-p-left_large">
      <button name='yes1' type="submit" 
                    class="slds-button slds-button_neutral yesBtn"
                    onclick={yesSelection}><div >Yes</div>
      </button>
     
      <button name='no1' type="submit" 
              class="slds-button slds-button_neutral noBtn"
              onclick={noSelection}><div >No</div>
      </button>
     </div>
  </lightning-layout-item>
  <lightning-layout-item size="4" >
    <div class="slds-m-around_large slds-p-left_large">
      <button name='yes2' type="submit" 
                    class="slds-button slds-button_neutral yesBtn"
                    onclick={yesSelection}><div >Yes</div>
      </button>
     
      <button name='no2' type="submit" 
              class="slds-button slds-button_neutral noBtn"
              onclick={noSelection}><div >No</div>
      </button>
     </div>
  </lightning-layout-item>
</lightning-layout>

JS Code :

 import { LightningElement, track } from 'lwc';
    export default class ButtonColorChanger extends LightningElement {
        yesSelection(event){
           // console.log('Logging target '+event);
           // console.log('Logging target '+event.target);
           // console.log('Logging target json'+JSON.stringify(event.target));
            console.log('Logging name of called button in case of yes '+event.target.name);
            if(event.target.name=='yes1'){
            this.template.querySelector('[name="yes1"]').classList.add('dynamicCSS'); 
            this.template.querySelector('[name="no1"]').classList.remove('dynamicCSS');
            }
            if(event.target.name=='yes2'){
                this.template.querySelector('[name="yes2"]').classList.add('dynamicCSS'); 
                this.template.querySelector('[name="no2"]').classList.remove('dynamicCSS');
                }
        }
        noSelection(event){
            console.log('Logging name of called button in case of no '+event.target.name);
            if(event.target.name=='no1'){
            this.template.querySelector('[name="no1"]').classList.add('dynamicCSS');
            this.template.querySelector('[name="yes1"]').classList.remove('dynamicCSS');
            }
            if(event.target.name=='no2'){
                this.template.querySelector('[name="no2"]').classList.add('dynamicCSS');
                this.template.querySelector('[name="yes2"]').classList.remove('dynamicCSS');
                }
        }
    }

CSS :

.dynamicCSS{
    background-color:#007CBA;
    color: white;
    }

1 Answer 1

0

You can achieve this by creating a getter method and returning style directly from it.

get yes1Style(){
 if(this.yes1Select){
  return " background-color:#007CBA;color: white";
}

}

Similarly for yes2Style,no1Style and no2Style.

HTML code

 <button name='no1' type="submit"  style = {no1Style}
          class="slds-button slds-button_neutral noBtn"
          onclick={noSelection}><div >No</div>
  </button>

JS code

  yesSelection(event){        
       if(event.target.name=='yes1'){
          this.yes1Select = true;
           this.no1Select = false;
        }
    }

    noSelection(event){        
       if(event.target.name=='no1'){
          this.yes1Select = false;
          this.no1Select = true;
        }
    }
1
  • 1
    you are a big asset to this community. I see lot of great answer from your side. Keep going. Commented Nov 7, 2022 at 15:03

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .