Hi I’m trying to get attribute and then after set attribute

Here is my code

 
<divclass="box"style="width:100px;height:300px;background-color:#ffd800;">
    <p>Are you want to jquery</p>
</div>
 
<inputtype="button"class="btn"value="Green"style="background-color:green;color:#fff;"/>
<inputtype="button"class="btn"value="Red"style="background-color:red;color:#fff;"/>
<inputtype="button"class="btn"value="Blue"style="background-color:blue;color:#fff;"/>
 
 
<script>
    $(document).ready(function () {
        $('.btn').click(function () {
            var btnvalue = $(this).getAttribute('value');
            $('.box').setAttribute('style', 'background-color:' + btnvalue);
        });
    });
</script>

My question is when click on green button that time box color green and when click red button that time box color red.

My code is not work properly.