toggle a boolean variable on an onclick event handler in javascript

Question

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.

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

MattDiamant · Accepted Answer · 2013-02-27 04:48:00Z

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>

Sagar Kadam · Accepted Answer · 2013-02-27 04:55:30Z

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>

ѕтƒ · Accepted Answer · 2013-02-27 04:55:55Z

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>

Frosch · Accepted Answer · 2019-06-04 12:43:21Z

0

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

answered Jun 4, 2019 at 12:43

Frosch

163 bronze badges

Collectives™ on Stack Overflow

toggle a boolean variable on an onclick event handler in javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related