CODEWITHSUNDEEP
javascriptdom-events
rzk666
rzk666

Reputation: 223

Change background colors dynamically using "input" event

I'm trying to make a background change dynamically using Javascript using event listeners that are listening to "input" on input type="color" fields. When I click on the color input fields after I choose a color from the pallet, the background color changes properly. But, I'd like the background to change dynamically as the user scrolls the pallet, and not only when he chooses the final color. Hope I was clear, and thanks in advance!

/* Variables Caching */
var h3 = document.querySelector("h3");
var input_left = document.querySelector("#color_selector_1");
var input_right = document.querySelector("#color_selector_2");

/* Function Declerations */
function colorChange()
{
  // edit body style accordingally
  var newStyle = changeBodyStyle();
  // edit h3
  editH3(newStyle);
}

function editH3(new_body_style)
{
  h3.textContent = "";
  h3.textContent = new_body_style;
}

function changeBodyStyle()
{
    var new_background = "linear-gradient(to right, " + input_left.value.toString() + ", " + input_right.value.toString() + ")";
    document.body.style.background = new_background;
    return new_background;
}

/* Adding Event Listeners */
input_left.addEventListener("input", colorChange);
input_right.addEventListener("input", colorChange);
body{
  font: 'Raleway', sans-serif;
  color: rgba(0,0,0,.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5em;
  top: 15%;
  background: linear-gradient(to right, red, yellow);
}

h1{
  font: 600 3.5em 'Raleway' , sans-serif;
  color: rgba(0,0,0,.5);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .5em;
  width: 100%;
}

h3 {
  font: 900 1em 'Raleway' , sans-serif;
  color: rgba(0,0,0,0.5);
  text-align: center;
  text-transform: none;
  letter-spacing: 0.01em;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Gradient Background</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
      <h1>Background Generator</h1>
      <h2>Current CSS Background</h2>
      <h3>
          <h4>this is a test</h4>
      </h3>
      <input type="color" id="color_selector_1" value="#00ff00">
      <input type="color" id="color_selector_2" value="#ff0000">

      <!-- JavaScript -->
      <script type="text/javascript" src="script.js">
      </script>
  </body>
</html>

Upvotes: 3

Views: 414

Answers (1)

Joseph Sible-Reinstate Monica
Joseph Sible-Reinstate Monica

Reputation: 48572

You'll need to build your own color picker, or use a third-party one, rather than relying on the one built in to the browser. The one built in to the browser doesn't communicate the user's choice back to the page until the user clicks OK, so it's impossible to do what you want with it.

Upvotes: 3

Related Questions