Set random values for styling with jquery

Problem

I want to create a border-radius generator.I have created 4 sliders.One for top left radius one for top right radius ,one for bottom left and one for bottom right I have created a div that's supposed to change every corner radius when the users change each slider but even when i move the slider nothing happens Here is my code:

<!DOCTYPE html>
                                <html>
                                <head>
                                    <title>Border radius generator</title>


                                <script type="text/javascript" src="jquery-2.0.js"></script>
                                <script type="text/javascript">



                                var tl=$("#tl").val() +"px";

                                var tr=$("#tr").val() +"px";

                                var bl=$("#bl").val() +"px";

                                var br=$("btr").val() +"px";

                                var radius =function () {
                                    $("#codearea").css("border-radius","tl tr bl br");
                                }







                                </script>
                                <style type="text/css">

                                body{

                                    background: rgba(198,75,67,0.8);
                                }

                                h1{
                                    font-family: "Comic Sans MS";
                                    text-align: center;
                                }



                                p{
                                    font-family: Verdana,impact;
                                }

                                #codearea{



                                margin: 0 auto;
                                height: 20em;
                                width: 20em;
                                background: aqua;
                                border:4px solid darkgoldenrod;



                                }
                                input[type="range"]{
                                    background-color: red;
                                }
                                #br,#tr{
                                    float: right;
                                }
                                #tl,#tr{
                                    margin-top: 4em;
                                }
                                #bl,#br{
                                    margin-bottom: 4em;
                                }
                                #generator{
                                    display: block;
                                    margin:auto;
                                    background: gold;
                                    width: 80%;
                                    border: 3px solid gold;
                                }
                                </style>    
                                </head>
                                <body>
                                <h1>Simple border radius generator</h1>
                                <p>Just change the sliders and get the code</p>
                                <div id "generator">
                                    <input type="range" id="tl" min="1" max="1000" step="1" onclick="radius()">
                                    <input type="range" id="tr" min="1" max="1000" step="1" onclick="radius()">
                                            <div id="codearea"></div>
                                    <input type="range" id="bl" min="1" max="1000" step="1" onclick="radius()">
                                    <input type="range" id="br" min="1" max="1000" step="1" onclick="radius()">
                                </div>
                                </body>
                                </html>
Problem courtesy of: user3968801

Solution

You have issues in both your javascript and your html. I also reworked the code to only change the corner that the slider is referencing.

  1. $("#codearea").css("border-radius","tl tr bl br"); This is setting the border-radius property to the string 'tl tr bl br', not the combination of those variables.
  2. Your tl, tr, bl, br variables are only set once outside your event handler. So any changes to them will not be recorded. 3.<div id "generator"> is missing the = sign. So, this div does not have an id
  3. Your input tags were not closed.
  4. The range input fires a change event not a click event.

HTML

<div id="generator">
    <input type="range" class="ranges" id="tl" min="1" max="1000" step="1" value="0" />
    <input type="range" class="ranges" id="tr" min="1" max="1000" step="1" value="0" />
    <div id="codearea"></div>
    <input type="range" class="ranges" id="bl" min="1" max="1000" step="1" value="0" />
    <input type="range" class="ranges" id="br" min="1" max="1000" step="1" value="0" />
</div>

JavaScipt

$(document).ready(function () {
    var $codearea = $("#codearea");
    $('.ranges').on('change', function () {
        var newRad = $(this).val() + "px",
            corner;
        switch ($(this).attr('id')) {
            case 'tl':
                corner = "border-top-left-radius";
                break;
            case 'tr':
                corner = "border-top-right-radius";
                break;
            case 'bl':
                corner = "border-bottom-left-radius";
                break;
            case 'br':
                corner = "border-bottom-right-radius";
                break;
        }
        $codearea.css(corner, newRad);
    });
});

http://jsfiddle.net/9o83vh2p/2/

Solution courtesy of: Barbara Laird

Discussion

A lot of mistakes in your code. Your script should look like:

<script type="text/javascript">
var radius =function () {
        var tl = $("#tl").val() + "px",
        tr = $("#tr").val() + "px",
        bl = $("#bl").val() + "px",
        br = $("#br").val() + "px";
    $("#codearea").css("border-radius",tl + ' ' + tr + ' ' + bl + ' ' + br);
}
</script>
Discussion courtesy of: Greenonion

When you make a call to radius() when a slider changes, it uses the variables that were already set, and only set once, when the page loaded.

In other words, these lines:

                            var tl=$("#tl").val() +"px";

                            var tr=$("#tr").val() +"px";

                            var bl=$("#bl").val() +"px";

                            var br=$("btr").val() +"px";

are not re-run when radius() is called.

You should really move those into the radius function.

                            var radius =function () {
                                var tl=$("#tl").val() +"px";
                                var tr=$("#tr").val() +"px";
                                var bl=$("#bl").val() +"px";
                                var br=$("btr").val() +"px";

                                $("#codearea").css("border-radius","tl tr bl br");
                            }
Discussion courtesy of: CodingWithSpike

This recipe can be found in it's original form on Stack Over Flow.