ボタンの境界線の半径を入力テキストで変更します。

Question

いくつかの問題がありますが、その理由はわかりません。 入力テキストのボタンの境界線の半径を変更しようとしましたが、送信ボタンをクリックすると機能しません。

$(document).ready(function(){ 
 
\t $("#submitBorderRadius").click(function(){ 
 
\t \t var x = $("#borderradiusSelect").val(); 
 
\t \t $("#testButton").css("borderRadius", x) 
 
    }); 
 
});

<button id="testButton">Test</button> 
 

 

 
<form> 
 
Border Radius : <input type="text" id="borderradiusSelect" value="0px"><br> 
 
<button id="submitBorderRadius">Submit</button> 
 
</form>

誰かが問題が何であるかを知っている： 私はこれがありますか？

Answer 1

「送信」ボタンをクリックすると、ページが再読み込みされるため、「テスト」ボタンに適用されたボーダー半径の値が表示されることはありません。

jQueryのpreventDefault()メソッドを使用して、クリック時のページの再読み込みを停止できます。

私はこの動作を表示するようにコードを更新しました：

$(document).ready(function(){ 
 
    $("#submitBorderRadius").click(function(e){ 
 
    e.preventDefault(); 
 
    var x = $("#borderradiusSelect").val(); 
 
    $("#testButton").css("borderRadius", x) 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button id="testButton">Test</button> 
 

 

 
<form> 
 
Border Radius : <input type="text" id="borderradiusSelect" value="0px"><br> 
 
<button id="submitBorderRadius">Submit</button> 
 
</form>