A step-by-step guide to updating the background color in JavaScript when a button is clicked

Question

A step-by-step guide to updating the background color in JavaScript when a button is clicked

I successfully changed the text color, however, I am struggling to figure out how to change the background color of the p tag. If anyone could provide guidance on how to accomplish this, it would be greatly appreciated. Below you will find my HTML and JS code snippets.

function button(){
var btn = document.getElementById('btn');
btn.addEventListener('click', function onClick(event) {
  // Change text color globally
  document.body.style.color = 'red';
});
}    
button();

<style>
        p{
            box-sizing: border-box;
            border: 1px solid black;
            height: 20px;
            width: 300px;
            text-align: center;
            background-color: lightblue; /* Added background color style */
        }
    </style>
    
<p>Welcome To My Domain</p>



    <button id="btn">Button</button>

html css performance

Answer 1

Answer №1

You have the option to assign a class to the p tag and then refer to it in your event listener to modify its style using:

document.querySelector('.classname').style.backgroundColor = 'somecolor'

function updateButtonStyle() {
  var btn = document.getElementById('btn');
  btn.addEventListener('click', function onClick(event) {
    // Modify text color globally
    document.body.style.color = 'red';
    document.querySelector('.welcome').style.backgroundColor = 'black';
  });
}
updateButtonStyle();

<style>
  p {
    box-sizing: border-box;
    border: 1px solid black;
    height: 20px;
    width: 300px;
    text-align: center;
  }
</style>

<p class="welcome">Welcome To My Domain</p>



<button id="btn">Button</button>

Another approach is to toggle a class that applies styling to your element. In this example, define the class with styles in your CSS file and then use classList in JavaScript to toggle the class.

document.querySelector('.className').classList.toggle('someclass')

function updateButtonStyle() {
  var btn = document.getElementById('btn');
  btn.addEventListener('click', function onClick(event) {
    // Modify text color globally
    document.querySelector('.welcome').classList.toggle('instance-change')
  });
}
updateButtonStyle();

.instance-change {
  color: red;
  background-color: black;
}

p {
  box-sizing: border-box;
  border: 1px solid black;
  height: 20px;
  width: 300px;
  text-align: center;
}

<p class="welcome">Welcome To My Domain</p>

<button id="btn">Button</button>

Answer 2

You have the option to assign a class to the p tag and then refer to it in your event listener to modify its style using:

document.querySelector('.classname').style.backgroundColor = 'somecolor'

function updateButtonStyle() {
  var btn = document.getElementById('btn');
  btn.addEventListener('click', function onClick(event) {
    // Modify text color globally
    document.body.style.color = 'red';
    document.querySelector('.welcome').style.backgroundColor = 'black';
  });
}
updateButtonStyle();

<style>
  p {
    box-sizing: border-box;
    border: 1px solid black;
    height: 20px;
    width: 300px;
    text-align: center;
  }
</style>

<p class="welcome">Welcome To My Domain</p>



<button id="btn">Button</button>

Another approach is to toggle a class that applies styling to your element. In this example, define the class with styles in your CSS file and then use classList in JavaScript to toggle the class.

document.querySelector('.className').classList.toggle('someclass')

function updateButtonStyle() {
  var btn = document.getElementById('btn');
  btn.addEventListener('click', function onClick(event) {
    // Modify text color globally
    document.querySelector('.welcome').classList.toggle('instance-change')
  });
}
updateButtonStyle();

.instance-change {
  color: red;
  background-color: black;
}

p {
  box-sizing: border-box;
  border: 1px solid black;
  height: 20px;
  width: 300px;
  text-align: center;
}

<p class="welcome">Welcome To My Domain</p>

<button id="btn">Button</button>

A step-by-step guide to updating the background color in JavaScript when a button is clicked

Answer №1

Similar questions

The method window.scrollTo() may encounter issues when used with overflow and a height set to 100vh

Instructions for accessing a website with JavaScript authentication

The divs descend one after another with no problems related to margins or padding

The variablewidth feature in Slick Carousel is malfunctioning

Incorporating dynamic variables into Shopify's settings.html page

Require assistance with an unoccupied Django dialog box

"Enhance your images with dynamic captions using jQuery

Attach the footer to the bottom of the screen only if the main page text is limited in length

Eliminate php file extensions using .htaccess

Eliminating Unnecessary Stylesheets in Vite and Vue Website

Checking if the group of radio buttons has been selected using JQUERY

Struggling to line up three images with linked attachments in a single row using Bootstrap 4

Looking for a skilled JavaScript expert to help create a script that will automatically redirect the page if the anchor is changed. Any t

Set the background of the vue widget to be completely see-through

Leveraging src css within the React public directory

Tips for JavaScript validation before submitting a form in Zend framework

Manipulating Object origin data

Making <div> elements responsive by rearranging their display order using CSS in media queries, troubleshooting issues with floats, and adjusting font sizes

Struggling to make updates to News.php (Page Template) in WordPress, yet seeing no changes reflected in the browser

Using jQuery to animate a div element with CSS3