JavaScript brukes med HTML -elementene for å bygge interaktive webapplikasjoner. Et skript er lagt til med HTML-elementene for å generere popup-meldinger, skjemavalidering, rullegardinmeny osv. JavaScript lar brukere endre bakgrunnsfargen på HTML -elementer. Denne handlingen kan være tilknyttet klikkhendelsen til knappen for å gi funksjonaliteten når brukeren vil ha den.

Dette innlegget gir dyp innsikt for å veilede deg om hvordan du endrer bakgrunnsfargen ved å trykke på HTML knapp.

Hvordan endres bakgrunnsfarge ved å klikke på knappen i JavaScript?

JavaScript fungerer som en katalysator med HTML og CSS for å gi et interaktivt grensesnitt for en webside. Denne delen demonstrerer JavaScript -koden for å transformere bakgrunnsfargen etter å ha klikket på en knapp.
Syntaksen for å endre bakgrunnsfargen i JavaScript er som følger:

Syntaks

dokument.getElementById ('Id').stil.BakgrunnColor = 'Color';

Syntaksen er beskrevet som:

• bakgrunnsfarge representerer eiendommen for å endre bakgrunnsfargen.
• getElementById Angir at du leser og redigerer det spesifikke HTML -elementet.
• farge betegner den brukerdefinerte fargen for visning.

Et eksempel er gitt for å konvertere bakgrunnsfargen ved å trykke på/klikke på knappen.

Kode

Eksempel for å endre bakgrunnsfargen med JavaScript

Velkommen til JavaScript World

press den

Koden forklares her:

• Div for HTML -dokumentet for bakgrunnsfarge har en bredde og høyde på 400px og 300px henholdsvis.
• Etter det vises en melding som sier "Velkommen til JavaScript World”I den spesifiserte delen.
• En HTML -knapp er vedlagt med en knappemerke som er tilknyttet ColorFunction () metode.
• Ved hjelp av denne metoden endres fargen etter å ha trykket på “press den”-Knappen.
• Etter at klikkhendelsen av knappen er kalt, endres fargen til "oransje”.

Utgang før du klikker på knappen:

I utgangen er grønt til stede i bakgrunnen av teksten “Velkommen til JavaScript World”. Dessuten en HTML -knapp "press den" er tilknyttet.

Utgang etter å ha klikket på knappen:

Når knappen trykkes, endres den grønne fargen til oransje som kan sees i bildet ovenfor.

Konklusjon

I JavaScript endres bakgrunnsfargen ved hjelp av den innebygde egenskapen til datoobjektet. Denne egenskapen kan knyttes til en hendelse ved trykk av knappen. Når du klikker på knappen, blir bakgrunnsfargen endret. Her har du lært hvordan bakgrunnsfarge blir endret etter å ha klikket på en knapp i JavaScript.