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

JanrowAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.