Home/ Questions/Q 6995853
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T20:04:58+00:00

i am a bit new to using jquery, the following should display a button,

  • 0

i am a bit new to using jquery, the following should display a button, and when someone clicks the button, the font size of that button should change.

Unfortunately, the button does not change its font size, for reasons i am not sure of.

Edit:
this example is the same one as before with adjustments, it works but it will only change font, once the mouse has left the button’s area or if the button has be double clicked.

The font should change on only 1 click.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
  $(".button0").click(function() {
    $('.button0').css('font-size', '43px');
  });
});
</script>
<style type="text/css">
.button0{
position:fixed;
left:48px;
top:55px;
font-family:Arial;
font-size:8px;
font-weight:normal;
}
</style>
<body>
<div name="button0"><input class="button0" type="button" style="width: 148px;height: 72px;" value="Button"/></div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have to make sure the document is ready—as in, all elements have loaded—before making modifications.

    Wrap everything in this function:

    $(document).ready(function(){
    // your code here
});

    Besides that, your selector is looking for a div element with a class of button0 when you’re trying to modify an input element. Modify your selector to say input.button0.

    Also, jQuery has a $(this) selector which selects the current element. In your case it will select the clicked input.

    And finally, since you’re using jQuery 1.7.1, I’ll introduce you to on(). It’s generally recommended to delegate events using this function. Instead of $(div).click(), use this:

    $(document).on("click", "input.button0", function(){
    $(this).css("font-size", "43px");
});

    More about on() here.

    • 0