<img src="purplemoon.png" alt="Purple moon" id="moon-photo" />
<table>
<tr>
<th colspan="4">Control panel</th>
</tr>
<tr>
<td>
<!-- attempting to retrieve value from the input field -->
<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 am endeavoring to fetch the value from the number input and apply border-top-left-radius, but experiencing issues in achieving this.