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

Question

I have some issues and I don't know why. I try to change the border-radius of a button with an input text but when I click on the submit button it don't work. I have this :

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

Someone know what is the problem?

Answer 1

When the "Submit" button is clicked, the page is getting reloaded, so you never get the opportunity to see the border radius value applied to the "Test" button.

You can stop the page from reloading on click by using jQuery's preventDefault() method.

I've updated your code to show this in action:

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