By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,700 Members | 1,458 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,700 IT Pros & Developers. It's quick & easy.

Using a drop-down form to change the textarea's font-family attribute?

P: 12
I have written my question in english, I have used proper grammar, my question is detailed, I have posted code, and the code is formatted in code tags. Finally, I would like to make clear that I only want pointers[/i][/b]in the right direction. Don't do the work for me!!!!!!!! This is not a homework assignment, it is just for my own interest. There is literally no way you could delete this question.

Here is my question:
On my website,I would like the user to be able to change what kind of font the textarea field is in. The starting font is arial, and I want the user to be able to pick another font using a drop down list.

To that extent, I have created a drop-down list of 3 possible font families, as well as a large text box (textarea) with a starting font family of arial.

I am creating a javascript script that takes the user's input in the dropdown list and makes a corresponding change in the textarea's style attribute (the font-family one, to be specific).

My current javascript script works as follows: if the drop down form is changed, it executes the script, which finds the id of the textarea and changes its font family to times (it could be any other font, but I just chose that one as a general example for now). It does not work, however.

Expand|Select|Wrap|Line Numbers
  1.     <body>
  2.  
  3.     <script>
  4.     function fontChange(id) {
  5.         id.style.fontFamily = "times"
  6.     } 
  7.  
  8.     </script>
  9.  
  10.  
  11.     <select onchange="fontChange('texty')">
  12.     <option value="Times">Times</option>
  13.     <option value="Garamond">Garamond</option>
  14.     <option value="Arial">Arial</option>
  15.     </select>
  16.  
  17.     <textarea id = "texty;" style = "font-family:arial; width:700px; height:500px;">
  18.     </textarea>
  19.  
  20.     </body>
As you can see above, if the dropdown form is changed, the font should be changed to times. This does not happen, and I would like some help in figuring out why.AGAIN, I would like to stress that I don't want specific answers, that this is not a homework assignment, and that I am not trying to be disrespectful. A few helpful tips would be nice, that's all.
Feb 6 '13 #1
Share this Question
Share on Google+
1 Reply


Rabbit
Expert Mod 10K+
P: 12,430
You're passing a string to the function. The string "texty" is not the same as the object with the id "texty". Use the document.getElementById() function to return an object with a given id.
Feb 6 '13 #2

Post your reply

Sign in to post your reply or Sign up for a free account.