CODEWITHSUNDEEP
javascriptjqueryhtmlcss
GeorgeMMP
GeorgeMMP

Reputation: 105

Dynamically changing the CSS of a button, using JavaScript, and custom variables

I have one button that gets style from .btn-1.:

<a id="button1" class="btn btn-1">Hover me</a><br>

In the script, I have three variables, combining them in one string to create the gradient color on the button:

var color1 = "#fdceaa";
var color2 = "#FFFFFF";
var color3 = "#FFFFFF";
var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )'

And then I want to apply this "color" variable to the background-image, so that the button have a different gradient color.

I tried two different ways, one with document.querySelector and one with jQuery $('.btn.btn-1').css, but none of which worked (it didn't change the color of the button):

document.querySelector('.btn.btn-1')['background-image'] = color;
$('.btn.btn-1').css('background-image', color);

The console had no errors...

Full Code:

<style>
      body {
        font-family: 'Montserrat', sans-serif;
        margin: 0;
      }

  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
    height: 100%;
  }

  .btn {
    flex: 1 1 auto;
    margin: 10;
    padding: 20px;
    text-align: center;
    transition: 0.5s;
    background-size: 200% auto;
    color: white;
    box-shadow: 0 0 20px #eee;
    border-radius: 1000px;
  }

  .btn:hover {
    background-position: right center;
  }

  .btn-1 {
    background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
  }
</style>

<body>
  <div class="container">
    <a id="button1" class="btn btn-1">Hover me</a><br>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
      var color1 = "#fdceaa";
      var color2 = "#FFFFFF";
      var color3 = "#FFFFFF";
      var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )'
      document.querySelector('.btn.btn-1')['background-image'] = color;
      $('.btn.btn-1').css('background-image', "red");
    </script>
  </div>
</body>

https://codepen.io/anon/pen/VgRxoK?editors=1010

Upvotes: 6

Views: 376

Answers (3)

jerrylow
jerrylow

Reputation: 2629

Update:

The other answer was actually correct the actual problem was the spaces before the % sign. I cleaned it up when I manually moved the code over:

var color = 'linear-gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )';

Should be:

var color = 'linear-gradient(to right, ' + color1 + ' 0% , ' + color2 + ' 51% ,' + color3 + ' 100% )';

Here's the CodePen https://codepen.io/anon/pen/bzZmrm - note you can use the CSS and JS boxes to input your respective code.

Upvotes: 2

Rikonator
Rikonator

Reputation: 1860

This line here is the culprit:

var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )';

As pointed out earlier, there should not be a space between linear - gradient, instead it should be linear-gradient. The other issue is that there are also spaces in the percentages of the steps. 0 % should be 0%.

If you remove the spaces, you will get the intended result. However, to avoid problems that stem from dynamically building strings with the concatenation operator, I invite you to take a look at template literals.

Here is the same statement using template literals. I personally find that it is less confusing to read.

var color = `linear-gradient(to right, ${color1} 0%, ${color2} 51% , ${color3} 100%)`;

Finally, here's a CodePen applying all that I've said, in addition to using a function to build the background-image value. Hopefully, it will give you a direction to go towards.

Upvotes: 2

machineghost
machineghost

Reputation: 35725

Ok, first off:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  var color1 = "#fdceaa";

You shouldn't combine scripts like that, you should use separate tags:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
var color1 = "#fdceaa";
// ...
</script>

Second, when you add code in a script tag, that code gets run the moment the browser reads that script tag (ie. when it first loads the page). But you don't want it to do something when it loads, you want it to do something when the user hovers.

To do that you have to setup something called an event listener (at load time). First setup your color vars as before:

var color1 = "#fdceaa";
var color2 = "#FFFFFF";
var color3 = "#FFFFFF";
var color = 'linear - gradient(to right, ' + color1 + ' 0 % , ' + color2 + ' 51 % ,' + color3 + ' 100 % )'

Then, setup your even listener, in this case a "hover" listener:

$('.btn.btn-1').hover(e => {
  // This code will be run when the user hovers over .btn.btn-1
  // Also note that this should be background-color, not background-image
  $('.btn.btn-1').css('background-color', "red");
  // You could also use $(e.target) or $(this) instead of $('.btn.btn-1')
});

Now, when someone hovers over your button that code will run, and you can substitute your dynamic values for a hard-coded red.

Upvotes: 1

Related Questions