Sptfr Sptfr - 1 year ago 54
jQuery Question

Input changing border-radius + suggestion

to make it short :
I have a picture, set border-radius to it, got a input type number, which should change the border-top-left on keyup( also suggest if there s a better way to do it than keyup ). However code does not work for some reason. I've tried debugging and it seems it take the value properly, tried setting particular border-top-left-radius like 35px and it works as well, but when i set it to the value of "x" it does not work. Here s a JS fiddle: https://jsfiddle.net/fwsd8td1/ - the jquery in the JSfiddle does not work for some reason.

Here's the code:


<div id="gallery">
<img src="http://thumbnails.cbc.ca/maven_legacy/thumbnails/822/983/raw-obama-prince-george-050116.jpg" alt="" id="pic" />

<input type="number" name="TLR" min="0" max="50" " />


main div#gallery > img {
width: 200px;
height: 300px;

#pic {
border-radius: 250px;


$("input[name='TLR']").on('keyup', function() {
var x = $("input[name='TLR']").val();

console.log(x); /* debug */

Note that x should get "px" as default

Answer Source

Method 1 :Using Javascript in keyup event

    $("input[name='TLR']").on('keyup', function() {

    var x= $("input[name='TLR']").val();

 document.getElementById("pic").style.borderTopLeftRadius  = x+'px';


Click Here For Live Demo

Method 2 :Using Jquery

$("input[name='TLR']").on('keyup', function() {

        var x= $("input[name='TLR']").val();

         $('#pic').css('border-top-left-radius', x+'px');


Click Here For Live Demo