title: toggle a boolean variable on an onclick event handler in javascript
body: <p>Is there a way to toggle a boolean value on an onclick event handler in javascript? I thought the script I had would've worked but I guess not.</p>
  
  <p>HTML (Not my full script)</p>
  
  <pre><code>&lt;form action = "event_add.php" method = "post"&gt;
    &lt;label&gt;Details&lt;/label&gt;
    &lt;div class = "details"&gt;
      &lt;span class = "editImg" onclick = "javascript:updateTextArea('&lt;strong&gt;','&lt;/strong&gt;',bold)"&gt;&lt;strong&gt;B&lt;/strong&gt;&lt;/span&gt;
      &lt;span class = "editImg" onclick = "javascript:updateTextArea('&lt;em&gt;','&lt;/em&gt;',ital)"&gt;&lt;em&gt;I&lt;/em&gt;&lt;/span&gt;
      &lt;textarea id = "txtAreaDetails" rows = "15" cols = "40"&gt;&lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var bold = false;
  var ital = false;
  
  function updateTextArea(beg_tag,end_tag,variable){
    if(variable == false){
      variable = true;
      var output = beg_tag;
    }else{
      variable = false;
      var output = end_tag;
    }
    var text = document.getElementById("txtAreaDetails").value;
    document.getElementById("txtAreaDetails").value = text + output;
  }
  </code></pre>
  
  <p>What I'm trying to do is when the user clicks on the 'B', the textarea field will add a strong tag to it. Then if the user clicks it again, it will show the end tag /strong Same thing with the I, but with em and /em. The result I'm getting is always adding the beg_tag no matter how many times I click it.</p>
  
  <p>I'm not too familiar with javascript, I do most of my programing in PHP so I'm not familiar if there's any built in functions to do this.</p>