Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 839
  • Last Modified:

Change font size with JavaScript via INPUT FORM

I want to change the font size of a disabled button in a form, from 16px to 10px.
When the button is pressed I want the message to display on the button but my message is a bit too long so the message looks too large and too long. Yes, I know I can change the font size of the button message, but I want it set to 16px before pressed.

I can't get my JavaScript to work to change the font size. Please correct my code so the font size willl change in the button. If that is not possible, then show me another way to get the same result.
<script>
   function DisableButton(b)
   {
      b.disabled = true;
      b.value = 'Not Active';
   }
   }
      b.style.fontSize = 10px;
   }
 
</script>
 
<input type="button" style="display:inline;font-size:16px" value="Finish" onclick="DisableButton(this);" />

Open in new window

0
Janrow
Asked:
Janrow
  • 5
  • 2
  • 2
  • +3
3 Solutions
 
MacAnthonyCommented:
If it's always gonna be the same sizes, I would just setup two classes. One for each font size and then just switch the classname of the element onclick.


<script>
   function DisableButton(b)
   {
      b.disabled = true;
      b.value = 'Not Active';
   }
   }
      b.classname = 'smallertext';
   }
 
</script>
 
<style>
 
.biggertext {
font-size: 16px;
}
 
.smallertext {
font-size: 10px;
}
 
</style>
 
<input type="button" class="biggertext" value="Finish" onclick="DisableButton(this);" />

Open in new window

0
 
Iced-evilCommented:
b.style.fontSize = 10px
Could you try and change the fontSize to FontSize (capital F)
0
 
hieloCommented:
you need to put the value in quotes:
b.style.fontSize = "10px";
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
JanrowAuthor Commented:
Thanks guys but none of these seem to be working. Get Object Expected error.
 
Here's the code I'm using. The page is working except for the font size.


 
<script>
   function DisableButton(b)
   {
      b.disabled = true;
      b.value = 'Not Active';
   }
   }
      b.classname = 'smallertext';
   }
 
</script>
 
<style>
 
.biggertext {
font-size: 16px;
}
 
.smallertext {
font-size: 10px;
}
 
</style>
 
<cfoutput>
<form action="#CGI.SCRIPT_NAME#" method="post">
 
<cfif IsDefined("AutoGenerateButton") OR IsDefined("LuckySaveButton")>
<input type="submit"  name="FinishButton" value="Finish" style="display:inline;font-size:18px">
<cfelse>
<input type="submit" class="biggertext" value="Finish" onclick="DisableButton(this);" />
 
 
</cfif>
</form>

Open in new window

0
 
sh0eCommented:
What's with the extra braces?
<script>
   function DisableButton(b)
   {
      b.disabled = true;
      b.value = 'Not Active';
      b.style.fontSize = '10px';
   }
 
</script>
 
<input type="button" style="display:inline;font-size:16px" value="Finish" onclick="DisableButton(this);" />

Open in new window

0
 
MacAnthonyCommented:
The extra curly brackets are probably stopping the function execution. I've tried all versions of this including setting it with:

b.style.fontSize = 10;
b.style.fontSize = '10px';

And they all work. Pretty sure it's just that small typo.
<script>
   function DisableButton(b)
   {
      b.disabled = true;
      b.value = 'Not Active';
      b.classname = 'smallertext';
   }
 
</script>

Open in new window

0
 
MacAnthonyCommented:
double post, sorry sh0e
0
 
sh0eCommented:
It's fine, I'm more just surprised such a silly typo made it through so many experts.  No offense intended.  Made me think I was missing something important.  At least I know it's not just me now.
0
 
scrathcyboyCommented:
<input type="button" id="sizing" style="display:inline;font-size:16px" value="Finish" onclick="DisableButton(this);" />

in javascript, just do this --

document.getElementById('sizing').style.font-size = "10px";

Note 2 things -- the input tag now has a name, and the correct CSS is "font-size" not fontSize.

If you can't get it to change this way, then use a name for the input tag, and assuming a form name="form1" -- then --

<input type="button" name="sizing" style="display:inline;font-size:16px" value="Finish"
onclick="DisableButton(this);" />

document.form1.sizing.style.font-size ="10px";
0
 
MacAnthonyCommented:
The css element is font-size, but the correct javascript dom property is fontSize.

http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSS2Properties
0
 
JanrowAuthor Commented:
That did it. Yes. Just the typo kept it for working. I'll try to spread the points around, with MacAnthony getting a bit more.
0
 
scrathcyboyCommented:
"That did it. Yes. Just the typo kept it for working. "

What did it -- I want to know specifically?
0
 
MacAnthonyCommented:
The extra brackets in the function typo.
0

Featured Post

Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

  • 5
  • 2
  • 2
  • +3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now