HTML and Javascript button to make text in a textarea bold and unbold, Possibly using JQuery?

Question

I currently have a button that makes the text in a textarea bold it uses

<a href="#" class="stylingButtons" type="button" onclick="boldTextArea()" value="Bold Text"}>
 <img alt='Bold Button' src='BButton.gif' border='4' width="90px" >
</a>

for the HTML section and

function boldTextArea(){
document.getElementById("TextArea").style.fontWeight="bolder";;
}

for the javascript

Is there anyway I can edit this coding so that once the text in the text area is already bold, I could click again for it to become unbold? I'm really not keen on the idea of using jQuery as I have never had any experience with it, but I am open to to suggestions in this format?

Answer 1

if you dont want to use jquery , here is a quick'n'dirty javascript

function boldText(){
    var target = document.getElementById("TextArea");
    if( target.style.fontWeight == "bolder" ) {
        target.style.fontWeight = "normal";
    } else {
        target.style.fontWeight = "bolder";
    }
}

should work just fine. this is the basic way of switching from bold to normal and back i guess.

also notice the DOUBLE ";" in yout JS.

hope this helps.

gr Ace

---

UPDATE

here is the jQuery version to change ( toggle ) the text size ( or any other css attribute ) on each click..

$("#textboxid").click( function(e) {
    if( $(this).css("font-size") == "12px" ) {
        $(this).css("font-size", "14px")
    } else {
        $(this).css("font-size", "12px")
    }
});

replace the css attribute to yout likes if you want to change any other attributes.

Answer 2

I just did this on a site of mine and found the answer here:

Press button to "Bold" & press again to "Unbold"

Hope this helps.