The pure JavaScript function for changing the background color in CSS is not functioning properly

Question

The pure JavaScript function for changing the background color in CSS is not functioning properly

I'm having trouble understanding why the color does not change after clicking. Can anyone explain?

function butt(color) {
    if(document.getElementById("bt").style.backgroundColor=="green"){
            document.getElementById("bt").style.backgroundColor="purple";
    }
};
document.getElementById("bt").addEventListener("click", function() {
    butt("green")
});

#bt {
    background-color:yellow;
    border-radius:10%;
    padding:10px;
    margin:20px;
}

<div class="row">
    <div id="forbutton">
        <button type="button" id="bt">It's me MrButton !</button>
    </div>
</div>

javascript html css

Answer 1

Answer №1

You are passing the string "green" as an argument through the function. More details can be found in the code snippet below.

SNIPPET

// Passing the string through the function
function updateColor(color) {

  // If the string is "green"
  if (color === "green") {

    // Change the background color of element with ID 'bt' to purple
    document.getElementById("bt").style.backgroundColor = "purple";
  }

};

// Register click event for element with ID 'bt'
document.getElementById("bt").addEventListener("click", function() {

  // Call the updateColor() function and pass the string "green"
  updateColor("green")
});

#bt {
  background-color: yellow;
  border-radius: 10%;
  padding: 10px;
  margin: 20px;
}

<div class="row">
  <div id="forbutton">
    <button id="bt">Click Me!</button>
  </div>

Answer 2

You are passing the string "green" as an argument through the function. More details can be found in the code snippet below.

SNIPPET

// Passing the string through the function
function updateColor(color) {

  // If the string is "green"
  if (color === "green") {

    // Change the background color of element with ID 'bt' to purple
    document.getElementById("bt").style.backgroundColor = "purple";
  }

};

// Register click event for element with ID 'bt'
document.getElementById("bt").addEventListener("click", function() {

  // Call the updateColor() function and pass the string "green"
  updateColor("green")
});

#bt {
  background-color: yellow;
  border-radius: 10%;
  padding: 10px;
  margin: 20px;
}

<div class="row">
  <div id="forbutton">
    <button id="bt">Click Me!</button>
  </div>

The pure JavaScript function for changing the background color in CSS is not functioning properly

Answer №1

Similar questions

The parameter type 'Event' cannot be assigned to the argument type

What is the best way to incorporate a loop into a React return statement?

Customizing SharePoint Web Part Styles with CSS: Header Alignment Issue with Body_TEXT

The application of textures in Three.js models is not working correctly on the entire object

Full-Width Bootstrap Sticky Containerized

Using jQuery to specifically target elements of a specific class that are nested within another element

How to Capture Clicks on Any DOM Element in React

Maintaining the $index value across all pagination pages in AngularJS while matching it with the items in the data list

Using jQuery to select a nested element in HTML

Implementing a dual hover effect on a Div element

Convert Ajax null value to NoneType in web2py

What is the purpose of using defer="defer" in JavaScript?

Issue with data updating in Angular rxjs with share, map, and filter functions

Problem with Express.js serving dynamically generated index.html page

Validation of default values in contact forms

Implementing a DataTable filter functionality using external buttons or links

capturing webpage content with javascript for use in a screenshot

Using the HTML select tag to choose an integer value with AngularJS

What are the limitations when using React's forwardRef with Material UI's styled components?

Is there a way to implement a scrollbar within a DIV element?