Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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"><!--

    function fontChooser (input, output)
    {

    var fontstyle_val = input.value;

    var fontstyle = "";

    if (fontstyle_val == 0){
    fontstyle='"font-size: 14pt; font-family: Arial Black;"'
    }

    else if (fontstyle_val == .25){
    fontstyle='"font-size: 14pt; font-family: Times New Roman PS MT;"'
    }

    else if (fontstyle_val == .35){
    fontstyle='"font-size: 14pt; font-family: Montague;"'
    }

    else {
    fontstyle='"font-size: 14pt; font-family: Helvetica;"'
    }
    output.style = fontstyle;
    }
    //--></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
    Last edited by v1cToR; 08-09-2005 at 05:42 AM.

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    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).

  • #3
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up problem solved!

    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!

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    10,966
    Thanks
    0
    Thanked 236 Times in 233 Posts
    I had a typo in my code.
    Code:
    output.stye.font
    That should have been style. I already edited my previous post.

  • #5
    New to the CF scene
    Join Date
    Aug 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •