Guide on utilizing popup box input to amend CSS (background color)

Question

Guide on utilizing popup box input to amend CSS (background color)

I'm looking for some guidance on JavaScript and CSS.

Is there a way to create a popup box where users can input a color (any main primary color recognized by CSS) and then have the background color of the page change accordingly in an external stylesheet? I know it involves a combination of attributes in CSS, but clear guidance on how to apply this in relation to the external CSS file is what I need help with.

Inspired by W3Schools:

function myFunction() {
var person = prompt("Please enter your name", "Harry Potter");
if (person != null) {
    document.getElementById("demo").innerHTML =
    "Hello " + person + "! How are you today?";
}
}

And also from W3Schools:

onclick="this.parentElement.style.display='none';"

My question now is how do I modify the 'display='none';' part in order to take input from the popup box and use it in the onclick event to achieve my desired effect? Would something like 'this.parentElement.style.backgroundcolor='" + usercolorinput + "';' work?

Your assistance is greatly appreciated.

javascript css

Answer 1

Answer №1

Below is my approach to changing the color based on user input.

Changing the Color with User Input

function modifyBackgroundColor(element) {
  document.body.style.backgroundColor = element.value;
}

<h4> Enter #333 or pink below: </h4>
<input oninput="modifyBackgroundColor(this)"/>

Explanation:

The <input> element can trigger various events based on user interaction. In this case, I've utilized the oninput event, which executes whenever you type in the <input>, to call a function named modifyBackgroundColor.

When calling the function, the input element itself is passed as an argument. Therefore, within the modifyBackgroundColor function, we have access to the triggering element.

Within the function, we retrieve the input's value and then set the backgroundColor of the page's body to match that value.

Alternatively Using a Button

You also have the option to change the color using a button.

function modifyColor() {
  // Retrieve the input element's value
  var inputVal = document.getElementById("colorInput").value;
  
  // Apply the value as the backgroundColor for the body
  document.body.style.backgroundColor = inputVal;
}

<h4> Enter #333 or pink below, then click "Change Color": </h4>
<input id="colorInput"/>
<button onclick="modifyColor()"> Change Color </button>

Explanation:

In this scenario, the modifyColor function is triggered by clicking the button.

Inside the function, we fetch the input's value by selecting the input through its id attribute and capturing its value.

We subsequently employ that value to set the backgroundColor of the body, replicating the behavior seen in the preceding example.

Answer 2

Below is my approach to changing the color based on user input.

Changing the Color with User Input

function modifyBackgroundColor(element) {
  document.body.style.backgroundColor = element.value;
}

<h4> Enter #333 or pink below: </h4>
<input oninput="modifyBackgroundColor(this)"/>

Explanation:

The <input> element can trigger various events based on user interaction. In this case, I've utilized the oninput event, which executes whenever you type in the <input>, to call a function named modifyBackgroundColor.

When calling the function, the input element itself is passed as an argument. Therefore, within the modifyBackgroundColor function, we have access to the triggering element.

Within the function, we retrieve the input's value and then set the backgroundColor of the page's body to match that value.

Alternatively Using a Button

You also have the option to change the color using a button.

function modifyColor() {
  // Retrieve the input element's value
  var inputVal = document.getElementById("colorInput").value;
  
  // Apply the value as the backgroundColor for the body
  document.body.style.backgroundColor = inputVal;
}

<h4> Enter #333 or pink below, then click "Change Color": </h4>
<input id="colorInput"/>
<button onclick="modifyColor()"> Change Color </button>

Explanation:

In this scenario, the modifyColor function is triggered by clicking the button.

Inside the function, we fetch the input's value by selecting the input through its id attribute and capturing its value.

We subsequently employ that value to set the backgroundColor of the body, replicating the behavior seen in the preceding example.

Answer 3

Answer №2

To start, you should create a function that will determine the display value after a click event occurs.

function changeDisplay{
var value="block";
return value;
 }

Next, call this function within the click event like so: onclick="this.parentElement.style.display=changeDisplay()";

Please note: while the method to change background color remains the same conceptually, you may need to attach this function to another event such as text input changes, selecting an option from a dropdown menu, or any other way that suits your script or webpage.

Answer 4

To start, you should create a function that will determine the display value after a click event occurs.

function changeDisplay{
var value="block";
return value;
 }

Next, call this function within the click event like so: onclick="this.parentElement.style.display=changeDisplay()";

Please note: while the method to change background color remains the same conceptually, you may need to attach this function to another event such as text input changes, selecting an option from a dropdown menu, or any other way that suits your script or webpage.

Guide on utilizing popup box input to amend CSS (background color)

Answer №1

Changing the Color with User Input

Explanation:

Alternatively Using a Button

Explanation:

Answer №2

Similar questions

Combining several JSON objects into a single JSON object using JavaScript

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

"Utilizing the proto property in Express.js for handling request

Is there a way to manipulate the DOM without relying on a library like jQuery?

Adjust the size of items using a background image that covers the element

Is there an alternative method to retrieve the client's user agent if getStaticProps and getServerSideProps cannot be used together?

The JS content failed to load into the HTML page

Why does the response.json() method in the Fetch API return a JavaScript object instead of a JSON string?

Switching Next.js route using pure JavaScript

"Encountering a problem with ThreeJs graphics rendering

How come the data I send gets converted to Undefined when working with Tabulator?

What is the best approach to comply with the EsLint rule "react-hooks/exhaustive-deps" and properly implement componentDidMount using hooks in React with a warning level?

Linking Two HTML Components in Angular 4 with Identical Values

Ajax modal login feature refuses to close

What is the best way to showcase SVG code as an image using Vuejs?

Learn how to call JavaScript code from an HTML file using Ajax

What is the best way to arrange images in a 3 by 3 grid, beginning at position 0, using JavaScript to control navigation through button clicks?

What is the best way to set the length of an undefined item in an object to 0 in reactjs?

Deactivate the button in the final <td> of a table generated using a loop

The challenge with Normalizr library in Redux and how to address it

Guide on utilizing popup box input to amend CSS (background color)

Answer №1

Changing the Color with User Input

Explanation:

Alternatively Using a Button

Explanation:

Answer №2

Similar questions

Combining several JSON objects into a single JSON object using JavaScript

Using specific sections of JSON data to display in an alert message (Vanilla JavaScript)

"Utilizing the __proto__ property in Express.js for handling request

Is there a way to manipulate the DOM without relying on a library like jQuery?

Adjust the size of items using a background image that covers the element

Is there an alternative method to retrieve the client's user agent if getStaticProps and getServerSideProps cannot be used together?

The JS content failed to load into the HTML page

Why does the response.json() method in the Fetch API return a JavaScript object instead of a JSON string?

Switching Next.js route using pure JavaScript

"Encountering a problem with ThreeJs graphics rendering

How come the data I send gets converted to Undefined when working with Tabulator?

What is the best approach to comply with the EsLint rule "react-hooks/exhaustive-deps" and properly implement componentDidMount using hooks in React with a warning level?

Linking Two HTML Components in Angular 4 with Identical Values

Ajax modal login feature refuses to close

What is the best way to showcase SVG code as an image using Vuejs?

Learn how to call JavaScript code from an HTML file using Ajax

What is the best way to arrange images in a 3 by 3 grid, beginning at position 0, using JavaScript to control navigation through button clicks?

What is the best way to set the length of an undefined item in an object to 0 in reactjs?

Deactivate the button in the final <td> of a table generated using a loop

The challenge with Normalizr library in Redux and how to address it

"Utilizing the proto property in Express.js for handling request