How do I return a string from a function that will change style rather than value?

v1cToR · 08-08-2005, 11:11 PM

I am new to Javascript. I'm sure there are inconsistencies in my code. I am trying to make a form that will allow someone to pick a font style and then type text in a box which in turn will echo the text in the next box in the font style that they chose.

here is my script:

/*
<SCRIPT language="JavaScript"></SCRIPT>
*/

MY PROBLEM: The last line of my script! I am trying to return a string to the "style=" property of an "input" named "display_sign" which is the echo of the text typed in the first box. I've had success with the script by changing the last line to:

output.value = fontstyle;

this returns the string to the value of the input "display_sign" which tells me that my script IS working to a degree. I want it to return the string to the STYLE of the input rather than the VALUE because the VALUE will be an echo of the text typed in the first box:
/*
<input type=text name="exact_reading_of_sign" value="" size="60" maxlength="1024" onChange="doEcho()">
</p>
<input tpye="text" name="display_sign" value="Enter Text Above" size="20"
style="(fontstyle here --this is not how I'm calling the function, this is just to show what I want to change)" onBlur="doEcho();">
*/

When I make the style fixed to a certain font, the font shows up no problem:

<input tpye="text" name="display_sign" value="Enter Text Above" size="20"
style="font-size: 14pt; font-family: Arial Black;" onBlur="doEcho();">

but I want the font to change according to the selection.

Another issue I'm having is how to call the function...not sure what the best way would be....this is one way I've done it:

<input tpye="text" name="display_sign" value="Enter Text Above" size="20" onFocus="fontChooser(Font_Style, display_sign);" onBlur="doEcho();">
--Font_Style is the name of the input where the font style is chosen. It is assigned a value of -.15, 0, .25, .35 for reasons that aren't important here.

I'm assuming that using "output.style" in my function is incorrect somehow.

here is a screenshot of the piece of the form I'm working on:

I hope my explanation was thorough and understandable.
Any help would be greatly appreciated!!!
Thanks in advance!!

-Victor

glenngv · 08-09-2005, 05:46 AM

Code:

<script type="text/javascript">
function fontChooser (input, output)
{
   switch(input.options[input.selectedIndex].value){
      case 0:
          output.style.font = "14pt 'Arial Black'"; break;
      case 0.25:
          output.style.font = "14pt 'Times New Roman PS MT'"; break;
      case 0.35:
          output.style.font = "14pt Montague"; break;
      case 0.35:
          output.style.font = "14pt Helvetica"; break;
    }
}
</script>
...
<form>
<select name="Font_Style">
...
</select>
<input tpye="text" name="display_sign" value="Enter Text Above" size="20" onfocus="fontChooser(this.form.Font_Style, this);" />
</form>

The format to dynamically change a CSS property is this:

object.style.CssPropertyName = CssPropertyValue;

Where if the CSS property name is hyphenated (e.g. font-family), the hyphen is removed and changed to camelCase (e.g. fontFamily).

v1cToR · 08-09-2005, 07:58 AM

I tried to convert my if else statements to the switch statement and I had a bit of a problem. I'm not exactly sure why but I plugged in the rest of what u told me into my if else statement and it worked perfectly!! Thanks a million!

glenngv · 08-09-2005, 09:34 AM

I had a typo in my code.

Code:

output.stye.font

That should have been style. I already edited my previous post.

v1cToR · 08-09-2005, 01:51 PM

I actually saw the typo and changed it before I added the code. I forgot the exact error but it wasn't because of the typo.