0

有没有办法在javascript中的onclick事件处理程序上切换布尔值？我以为我的脚本会起作用，但我想不会。

HTML（不是我的完整脚本）

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

我想要做的是当用户点击“B”时，textarea 字段将为其添加一个强标签。然后如果用户再次单击它，它将显示结束标记 /strong 与 I 相同，但带有 em 和 /em。无论我点击多少次，我得到的结果总是添加 beg_tag 。

我对javascript不太熟悉，我的大部分编程都是用PHP进行的，所以我不熟悉是否有任何内置函数可以做到这一点。

4

4 回答 4

1

这应该有效。不要为每个标签名称创建一个单独的变量，而是为每个标签创建一个带有索引的对象。然后，您可以通过传入 updateTextArea 的名称访问真/假值。此外，您希望在传入粗体和斜体时将它们括在引号中，您的 html 不会这样做。

<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>
于 2013-02-27T04:48:00.317 回答
0

你需要在这里更改你的代码因为在 javascript 中没有什么比通过引用传递

<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>
于 2013-02-27T04:55:30.023 回答
0

这可以帮助你.. 

 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>
于 2013-02-27T04:55:55.350 回答
0

如果你（或任何人）只想切换一个布尔值，你可以像这个简短的函数那样做：

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

定义布尔值以在单击时切换：

var test = true;

使用一个简单的按钮来切换（例如）：

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

在这里查看实际操作：jsfiddle

于 2019-06-04T12:43:21.220 回答