OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Problem with the "setGradient()" function created in JavaScript [closed]

  • Thread starter Thread starter JHPK
  • Start date Start date
J

JHPK

Guest
The background color gradients were suppose to change as I change the palette colors. But the background colors do not change and remain the same as the default ones given in the respective CSS file.

Code:
var css = document.querySelector("h3");
var css = document.querySelector(".color1");
var css = document.querySelector(".color2");
var body = document.getElementById("Gradient");

function setGradient(){
    body.style.background = "linear-gradient(to right," 
    + color1.value 
    + "," 
    + color2.value 
    + ")";

    css.textContent = body.style.background;
}

color1.addEventListener("input", setGradient);

color2.addEventListener("input", setGradient);

This the JavaScript file.

Code:
<!DOCTYPE html>
<html>
    <title>Gradient Background</title>
    <link rel="stylesheet" type="text/css" href="style.css">
<body id="Gradient">
    <h1>Background Generator</h1>
    <input class="color1" type="color" name="color1" value="#00ff00">
    <input  class="color2" type="color" name="color2" value="#ff0000">
    <h2>Current CSS Background</h2>
    <h3></h3>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>

This is the respective HTML file.

Code:
 body{
    font: 'Raleway', san-serif;
    color: rgba(0,0,0,0.5);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    top: 15%;
    background: linear-gradient(to right, red, yellow);
 }

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

 h3{
    font: 900 1em 'Raleway', san-serif;
    color: rgba(0,0,0,0.5);
    text-align: center;
    text-transform: none;
    letter-spacing: 0.01em;
 }

This is the respective CSS file.

There was a similar question on here about this where someone said to use "body.style.backgroundImage", but that dosen't work too.

<p>The background color gradients were suppose to change as I change the palette colors. But the background colors do not change and remain the same as the default ones given in the respective CSS file.</p>
<pre><code>var css = document.querySelector("h3");
var css = document.querySelector(".color1");
var css = document.querySelector(".color2");
var body = document.getElementById("Gradient");

function setGradient(){
body.style.background = "linear-gradient(to right,"
+ color1.value
+ ","
+ color2.value
+ ")";

css.textContent = body.style.background;
}

color1.addEventListener("input", setGradient);

color2.addEventListener("input", setGradient);
</code></pre>
<p>This the JavaScript file.</p>
<pre><code><!DOCTYPE html>
<html>
<title>Gradient Background</title>
<link rel="stylesheet" type="text/css" href="style.css">
<body id="Gradient">
<h1>Background Generator</h1>
<input class="color1" type="color" name="color1" value="#00ff00">
<input class="color2" type="color" name="color2" value="#ff0000">
<h2>Current CSS Background</h2>
<h3></h3>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
</code></pre>
<p>This is the respective HTML file.</p>
<pre><code> body{
font: 'Raleway', san-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5em;
top: 15%;
background: linear-gradient(to right, red, yellow);
}

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

h3{
font: 900 1em 'Raleway', san-serif;
color: rgba(0,0,0,0.5);
text-align: center;
text-transform: none;
letter-spacing: 0.01em;
}
</code></pre>
<p>This is the respective CSS file.</p>
<p>There was a similar question on here about this where someone said to use "body.style.backgroundImage", but that dosen't work too.</p>
 
Top