使用输入文本更改按钮的边框半径

【问题标题】：Change the border-radius of a button with an input text使用输入文本更改按钮的边框半径
【发布时间】：2017-07-29 10:02:55
【问题描述】：

我有一些问题，我不知道为什么。我尝试使用输入文本更改按钮的边框半径，但是当我单击提交按钮时它不起作用。我有这个：

$(document).ready(function(){
	$("#submitBorderRadius").click(function(){
		var x = $("#borderradiusSelect").val(); 
		$("#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>

有人知道是什么问题吗？

【问题讨论】：

没人知道吗？ :(

标签： javascript jquery button text input

【解决方案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>

【讨论】：