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 に渡す名前で true/false 値にアクセスできます。また、ボールドとイタルを渡すときに引用符で囲みたいのですが、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

ここでコードを変更する必要があります

<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 に答える