用輸入文字更改按鈕的邊框半徑

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>