CODEWITHSUNDEEP
javascriptcss
BakeMeMuffins92
BakeMeMuffins92

Reputation: 67

How to use popup box input to change CSS (background color)

I have a quick question concerning JavaScript and CSS.

I'd like to have a popup box that allows you to enter a color (any main primary color that is recognized by CSS). After the user enters a color, I'd like it to alter the body element inside my external stylesheet to change the background color of the page. I know that I will need to use a combination of these attributes within CSS but I am not sure the syntax of how to relate it to the external CSS and the correct way to combine here.

From 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?";
}
}

Also from W3Schools:

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

Now, my main question I suppose is how to take the part where it says "display='none';" to actually take the input of the popup box and insert it in the onclick to achieve my goal (would it be something like this.parentElement.style.backgroundcolor='" + usercolorinput + "';")

Thanks in advance.

Upvotes: 0

Views: 515

Answers (2)

nicholaswmin
nicholaswmin

Reputation: 22979

Here is how I would do it.

Change color on user input

function changeColor(element) {
  document.body.style.backgroundColor = element.value;
}
<h4> Type #333, or pink below </h4>
<input oninput="changeColor(this)"/>

How it works:

The <input-element> can fire a number of events, based on your input. In this case I've used the oninput event, which is triggered every time you type something in the <input>, to call a function, called changeColor.

The input also sends the element itself when calling the function, as an argument. Therefore in my changeColor function, I have access to the element that triggered it.

Inside the function, I read the value of the input and then select the body of the page and set it's backgroundColor as the value of the input.

Or using a button

Or you can use a button, like you asked.

function changeColor() {
  // get the input element value
  var inputValue = document.getElementById("colorInput").value;
  
  // apply the value as a backgroundColor on body
  document.body.style.backgroundColor = inputValue;
}
<h4> Type #333, or pink below and press "Change color" </h4>
<input id="colorInput"/>
<button onclick="changeColor()"> Change color </button>

How it works:

In this case changeColor function is called by the button click.

Inside that function we get the value of the input, by getting the input via it's id attribute and reading it's value.

Then I use that value to apply backgroundColor to the body as I did in the above example

Upvotes: 2

Osama
Osama

Reputation: 3030

First create your function which return the display value after on click event.

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

Then call it in click function onclick="this.parentElement.style.display=changeDisplay()";

Note:- the way to change the background color at concept it is the same but you need to add this function to another event like text change in input text or select option from select box or the way you want in your script or web page

Upvotes: -1

Related Questions