Dynamically change font style and size in text field, using a drop down menu

Question

4.00/5 (1 vote)

See more:

Hi there I'm relatively new to web apps. and just doing some practice.
Here is what I what to learn how to do:
I have a text-field with three drop-down menus,with options to change the font style, font type, and font size.
So when the app runs, the user enters something in the text box and can style it which ever way they desire. the changes take effect with a click of a button.

I have this code that I modified from W3Shools, but I'm getting nowhere.I shorten the code and only included one font criteria to change the text.
I need direction. I have an idea of the tools i need to use, but don't know how to actually implement them. Thanks

XML

<html>
<head>
<script type="text/javascript">
function setFont()
{
if (document.getElementById("font")== Bold italic){
document.getElementById("Text10").style.font="italic bold 12px arial,serif";}
else if(Text10==Plain){
document.getElementById(Text10").style.font="plain 12px arial,serif";}
else if(Text10.innerHTML==Bold){
document.getElementById("Text10").style.font="bold 12px arial,serif";}
else{
document. getElementById("Text10").style.font="italic 12px arial,serif";}
}
</script>
</head>
<body>
<input id="Text10" type="text"/>
        <select id ="font" onchange="setFont()">
        <option value="Plain">Plain</option>
        <option value="Bold">Bold</option>
        <option value="Italic">Italic</option>
        <option value="Bold Italic">Bold Italic</option>
        </select>
<input type="button" onclick="setFont()" value="Change font" />
</body>
</html>

>>Is it necessary to use separate <div> for each element?

Posted 19-Feb-11 18:38pm

Zen_2011

Updated 20-Feb-11 5:28am

v3

Add a Solution

2 solutions

Solution 1

Hi if you have the javascript at the content page then use like this example

XML

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <script type="text/javascript" language="javascript">
        function setFont() {
            alert("Hello");
            document.getElementById("<%=TextBox1.ClientID %>").style.font = "italic bold 22px arial,serif";
        }
    </script>

    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <input type="button" value="Test" runat="server" onclick ="setFont();" />

</asp:Content>

if you are using it from the head section in the master page then refer my answer here..

Javascript Validation of Multiple Textboxes[^]

The point is document.getElementById("Text10") won't work because when loading the page it is not the ID of that element. So you have to use the ClientID property of that element class. That you can pass to the javascript in code behind or use it directly in the inline coding if the script is at the page content as shown above.

Posted 19-Feb-11 19:12pm

Albin Abel

Comments

Espen Harlinn 20-Feb-11 14:43pm

Another good answer, my 5

Albin Abel 20-Feb-11 22:10pm

Thanks Espen

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Accepted Answer · 2011-02-20T07:58:00

hello,

I have modified your code to help achieve your objective. Here are few thing to keep in mind.
- JavaScript is case sensitive.
- If you new to JavaScript, read more about it from the web (use Google)

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
function setFont()
{
    var selectFont = document.getElementById("font");
    if (selectFont) {
        var selectFontValue = selectFont.options[selectFont.selectedIndex].value;
        if (selectFontValue == "Bold Italic") {
            document.getElementById("Text10").style.font = "italic bold 12px arial,serif";
        }
        else if (selectFontValue == "Plain") {
            document.getElementById("Text10").style.font = "12px arial,serif";
        }
        else if (selectFontValue == "Bold") {
            document.getElementById("Text10").style.font = "bold 12px arial,serif";
        }
        else {
            document.getElementById("Text10").style.font = "italic 12px arial,serif";
        }
    }
}
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input id="Text10" type="text"/>
        <select id ="font">
        <option value="Plain">Plain</option>
        <option value="Bold">Bold</option>
        <option value="Italic">Italic</option>
        <option value="Bold Italic">Bold Italic</option>
        </select>
<input type="button" onclick="setFont()" value="Change font" />
    </div>
    </form>
</body>
</html>