How do I can change the event by uncheking the values..

Question

0.00/5 (No votes)

See more:

XML

<html>
<head></head>
<body>
    <table style="width:500px;height:400px;">
        <tr>
            <td>Font Family</td>
            <td>
                <select>
                    <option selected="selected">Select one.....</option>
                    <option>Calibri</option>
                    <option>Cambria</option>
                    <option>Verdana</option>
                    <option>Times New Roman</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>Font Size</td>
            <td>
                <a href="">Small</a>
                <a href="">Normal</a>
                <a href="Larger">Large</a>
            </td>
        </tr>
        <tr>
            <td>Font Style</td>
            <td>
                <input type="checkbox" onclick="applyStyle2()" id>Bold
                <input type="checkbox" onclick="applyStyle()">Italic
                <input type="checkbox" onclick="applyStyle3()">Underline
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <span id="spn">This is a paragraph</span>
                <script type="text/javascript">
                    var x="";
                    function applyStyle(){
                        document.getElementById("spn").style.fontStyle="italic";
                    }
                    function applyStyle2(){
                        document.getElementById("spn").style.fontWeight="bold";
                    }
                    function applyStyle3(){
                        document.getElementById("spn").style.textDecoration="underline";
                    }
                    /*
                    function applyfontStyle(){
                        document.getElementById("span").style.fontStyle="italic";
                    }
                    */
                </script>
            </td>
        </tr>
    </table>
</body>
</html>

JavaScript

Posted 24-Feb-14 20:19pm

Member 10617834

Add a Solution

Comments

♥…ЯҠ…♥ 25-Feb-14 2:34am

While unchecking you want to remove the appropriate font style am I right?

Member 10617834 25-Feb-14 4:03am

<select>
<option selected="selected">Select one.....</option>
<option>Calibri</option>
<option>Cambria</option>
<option>Verdana</option>
<option>Times New Roman</option>
</select>

this part is not working

♥…ЯҠ…♥ 25-Feb-14 4:06am

this is a new requirement,you have not added any code for this.... lemme try it for you

♥…ЯҠ…♥ 25-Feb-14 4:15am

See my updated solution, and mark it as answer if it helps you

Sergey Alexandrovich Kryukov 25-Feb-14 2:48am

Not clear. What do you mean by this question? "Change event"? "By unchecking the values"? What values? And so on...
Is Solution 1 relevant to your question?
—SA

♥…ЯҠ…♥ 25-Feb-14 2:57am

I think, OP is asking to remove the style if appropriate checkbox is unchecked since he already has for checked condition....
Assuming that I have given my solution

Member 10617834 25-Feb-14 3:43am

How to select different types of font family. its not working here.

♥…ЯҠ…♥ 25-Feb-14 3:56am

which one?

2 solutions

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)

♥…ЯҠ…♥ · Answer 1 · 2014-02-24T20:52:00

Hi,

Instead of having three different function you could use single function to do the same,

HTML part:

HTML

<input type="label" id="txtContent" value="RK"/>
<input id="chkbold" type="checkbox" onclick="applyStyle('b',this.id)">Bold
<input id="chkItalic" type="checkbox" onclick="applyStyle('i',this.id)">Italic
<input id="chkUnderline" type="checkbox" onclick="applyStyle('u',this.id)">Underline

Javascript function:

JavaScript

function applyStyle(styleOptn,chkbxID)
{
  var e = document.getElementById(chkbxID);
  var src= document.getElementById('txtContent');
  src.style.fontWeight = (e.checked && styleOptn == 'b') ? "bold": "";
  src.style.fontStyle = (e.checked && styleOptn == 'i') ? "italic": "";
  src.style.textDecoration = (e.checked && styleOptn == 'u') ? "underline": "";
}

Updated solution as per your requirement:

HTML

<select id="selectFontFamily" onchange ="changeFontFamily();">
                  <option selected="selected">Select one.....</option>
                  <option>Calibri</option>
                  <option>Cambria</option>
                  <option>Verdana</option>
                  <option>Times New Roman</option>
              </select>

Javascript function:

JavaScript

function changeFontFamily()
{
  var e = document.getElementById("selectFontFamily");
  var selectedValue = e.options[e.selectedIndex].value;
  var src= document.getElementById('txtContent');
  src.style.fontFamily = selectedValue;
}

Clean and sweet ;-), you could test it in this site http://jsbin.com/jotafaqu/5/[^]

Hope this helps you a bit.

Regards,
RK

King Fisher · Answer 2 · 2014-02-24T20:39:00

XML

<input type="checkbox" name="Bold" id="bld" onclick="applyStyle2()" ;Bold
                <input type="checkbox" name="italic" id="itl" onclick="applyStyle()">Italic
                <input type="checkbox" name="underline" id="ud" onclick="applyStyle3()">Underline

C#

function applyStyle()
{
if(document.getElementById("itl").checked)
{
document.getElementById("spn").style.fontStyle="italic";
}
}

C#

function applyStyle()
{
if(document.getElementById("bld").checked)
{
document.getElementById("spn").style.fontStyle="bold";
}
}

C#

function applyStyle()
{
if(document.getElementById("ud").checked)
{
document.getElementById("spn").style.fontStyle="underline";
}
}

How do I can change the event by uncheking the values..

2 solutions

Solution 2

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us