Button that makes textarea bold

Question

I have a button with onclick="bold()" , and it is assumed that it changes the font weight from normal to bold, and then returns to normal. But it does nothing. What do I need to change or add? Here is jsfiddle if this helps: http://jsfiddle.net/dZVfh/

 <script> var x = document.getElementById('description-box'); function bold() { if( $(x).css("font-weight") == "normal") { $(x).css("font-weight"), "bold"); } else { $(x).css("font-weight", "normal"); } } </script> 

Answer 1

There is a syntax error in the code:

Change

$(x).css("font-weight"), "bold");

to

$(x).css("font-weight", "bold");

---

Full function

 function bold() { var x = $('#description-box'); if (x.css("font-weight") !== "bold") { x.css("font-weight", "bold"); } else { x.css("font-weight", "normal"); } } 

---

Working script : http://jsfiddle.net/dZVfh/3/

There are a number of problems in your original violin.

• jQuery did not turn on

• The function was defined inside domReady - this means that it is not visible when the button is pressed

• There was a syntax error in the CSS block. Style was closed with ) instead of }

• You tried to assign the x element before the DOM was ready. The new fiddle does this inside the function (by then the DOM is ready)

Answer 2

I prefer it to change the class:

add this style

 .bold{ font-weight: bold; } 

change your function:

 function bold(){ if( $(x).hasClass("bold")) { $(x).removeClass("bold"); } else { $(x).addClass("bold"); } }