javascriptcsscss-gradients

Javascript Can't Update Gradient


I can't seem to update the linear gradient I've applied to my navbar. It works fine when I set it in my css file like so

.navbar-light {
    background-image: linear-gradient(rgba(255, 204, 153, 1), 75%, rgba(255, 204, 153, 0));
}

But it doesn't seem to work through Javascript even though I can set other attributes within the same function like so

function myFunc() {
    var nav = document.getElementById("myNavbar");
    nav.style.backgroundImage = "linear-gradient(rgba(255, 204, 153, 1), 90%, rgba(255, 204, 153, 0));"
    console.log(nav.style.backgroundImage);
}

What am I doing wrong here?


Solution

  • eh those semicolons :P

    (function myFunc() {
        var nav = document.getElementById("myNavbar");
        nav.style.backgroundImage = "linear-gradient(rgba(255, 204, 153, 1), 90%, rgba(255, 204, 153, 0))" // look on your code here
    })()
    .navbar-light {
        background-image: linear-gradient(rgba(255, 204, 153, 1), 75%, rgba(255, 204, 153, 0));
    }
    
    div.box{
      width: 100px;
      height: 100px;
      border: 1px solid black;
    }
    <div class="box navbar-light"> 1 </div>
    
    <div id="myNavbar" class="box"/> 2 </div>