Taking value from input number with JQuery and changing css

Question

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" />   
<table>
  <tr>
    <th colspan="4">Control panel</th>
  </tr>
  <tr>
    <td>
      <!-- trying to take value from that input -->
      <input type="number" min="0" max="50" class="br-left" />
    </td>
  </tr>
</table>

<script>
    $(document).ready(function(){   
        $('.br-left').on("change",function(){
        $('#moon-photo').css('border-top-left-radius',$('.br-left').val());
    });
});
</script>

I'm trying to take the value from that input number and put border-radius on top left but it's not working.

kind user · Accepted Answer · 2017-03-26 21:48:43Z

1

Remember about units.

Note: You don't have to select the input element again inside the css function, use this keyword instead.

$(document).ready(function() {
  $('.br-left').on("change", function() {
    $('#moon-photo').css('border-top-left-radius', $(this).val() + 'px');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" alt="Purple moon" id="moon-photo" />
<table>
  <tr>
    <th colspan="4">Control panel</th>
  </tr>
  <tr>
    <td>
      <!-- trying to take value from that input -->
      <input type="number" min="0" max="50" class="br-left" />
    </td>
  </tr>
</table>

answered Mar 26, 2017 at 21:48

kind user

42k8 gold badges69 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cloudy Skies Over a year ago

Ohhhhhhh. Thank you so much!

Collectives™ on Stack Overflow

Taking value from input number with JQuery and changing css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related