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.

HTML (Not my full script)

<form action = "event_add.php" method = "post">
  <label>Details</label>
  <div class = "details">
    <span class = "editImg" onclick = "javascript:updateTextArea('<strong>','</strong>',bold)"><strong>B</strong></span>
    <span class = "editImg" onclick = "javascript:updateTextArea('<em>','</em>',ital)"><em>I</em></span>
    <textarea id = "txtAreaDetails" rows = "15" cols = "40"></textarea>
  </div>
</form>

Javascript:

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;
}

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.

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.

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.

HTML (Not my full script)

<form action = "event_add.php" method = "post">
  <label>Details</label>
  <div class = "details">
    <span class = "editImg" onclick = "javascript:updateTextArea('<strong>','</strong>',bold)"><strong>B</strong></span>
    <span class = "editImg" onclick = "javascript:updateTextArea('<em>','</em>',ital)"><em>I</em></span>
    <textarea id = "txtAreaDetails" rows = "15" cols = "40"></textarea>
  </div>
</form>

Javascript:

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;
}

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.

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.

• javascript
• events
• onclick
• boolean
• handler

• I wasn't sure on how to show the tags, when trying to describe it. Sorry if its misleading for anybody. – Vince Commented Feb 27, 2013 at 4:42

4 Answers 4

This should work. Instead of having a separate variable for each tag name, create an object with indices for each tag. Then you can access the true/false value by the name you pass in to updateTextArea. Also, you want to wrap bold and ital in quotes when you pass them in, your html does not do this.

<form action = "event_add.php" method = "post">
  <label>Details</label>
  <div class = "details">
    <span class = "editImg" onclick = "updateTextArea('<strong>','</strong>','bold')"><strong>B</strong></span>
    <span class = "editImg" onclick = "updateTextArea('<em>','</em>','ital')"><em>I</em></span>
    <textarea id = "txtAreaDetails" rows = "15" cols = "40"></textarea>
  </div>
</form>

<script>

    var tagNames = {"bold": false, "ital": false};

    function updateTextArea(beg_tag,end_tag,variable){
      if(tagNames[variable] == false){
        tagNames[variable] = true;
        var output = beg_tag;
      }else{
        tagNames[variable] = false;
        var output = end_tag;
      }
      var text = document.getElementById("txtAreaDetails").value;
      document.getElementById("txtAreaDetails").value = text + output;
    }
</script>

You Need to change your code over here Since in javascript there is nothing like pass by reference

<form action = "event_add.php" method = "post">
        <label>Details</label>
        <div class = "details">
            <span class = "editImg" onclick = "javascript:updateTextArea('<strong>','</strong>','bold')"><strong>B</strong></span>
            <span class = "editImg" onclick = "javascript:updateTextArea('<em>','</em>','ital')"><em>I</em></span>
        </div>
        <textarea id='txtAreaDetails'>

        </textarea>

    </form>



<script type="text/javascript">
        var bold = false;
        var ital = false;

        function updateTextArea(beg_tag,end_tag,variable){
            var output = "";
            switch(variable)
            {
                case 'bold':
                    {
                        if(bold == false)
                        {
                            output = beg_tag;
                        }
                        else
                        {
                            output = end_tag;
                        }
                        bold = !bold;
                        break;
                    }
                case 'ital':
                    {
                        if(ital == false)
                        {
                            output = beg_tag;
                        }
                        else
                        {
                            output = end_tag;
                        }
                        ital = !ital;
                        break;
                    }
            }

            var text = document.getElementById("txtAreaDetails").value;
            document.getElementById("txtAreaDetails").value = text + output;
        }
    </script>

This could help you..

 function updateTextArea(beg_tag,end_tag,variable){
  var element = document.getElementById("editImg"); 
  if(variable == 0){
    element.setAttribute("onclick", "javascript:updateTextArea('<strong>','</strong>',1)"); 
    var output = beg_tag;
  }else{
  element.setAttribute("onclick", "javascript:updateTextArea('<strong>','</strong>',0)"); 
    var output = end_tag;
  }
  var text = document.getElementById("txtAreaDetails").value;
  document.getElementById("txtAreaDetails").value = text + output;
}

 </script>
</head>
<body>
<form action = "event_add.php" method = "post">
  <label>Details</label>
  <div class = "details">
    <span id = "editImg" onclick = "javascript:updateTextArea('<strong>','</strong>',0)"><strong>B</strong></span>
    <span id = "editImg" onclick = "javascript:updateTextArea('<em>','</em>',ital)">    <em>I</em></span>
    <textarea id = "txtAreaDetails" rows = "15" cols = "40"></textarea>
  </div>
</form>
</body></html>

If you(or anyone) just want to toggle a boolean, you can do it like this short function:

function toggle(boo) {
  return boo == true ? false : true;
}

Define boolean to toggle on click:

var test = true;

Use a simple Button to toggle(e.g.):

 <input type="button" value="Toggle me!" onclick="test=toggle(test);">

See in action here: jsfiddle