は、私はその入力番号から値を取得し、左上に国境半径を入れしようとしているが、それは働いていないjQueryを使って入力番号から値を取り、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> 

を変更します。

Answer 1

ユニットを忘れないでください。

注：あなたは、css関数内で再びinput要素を選択する代わりにthisキーワードを使用する必要はありません。

$(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>