在 javascript 中的 onclick 事件处理程序上切换布尔变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15104312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
toggle a boolean variable on an onclick event handler in javascript
提问by Vince
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.
有没有办法在 javascript 中的 onclick 事件处理程序上切换布尔值？我以为我的剧本会起作用，但我想不会。
HTML (Not my full script)
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:
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.
我想要做的是当用户单击“B”时，textarea 字段会为其添加一个强标记。然后，如果用户再次单击它，它将显示结束标记 /strong 与 I 相同，但带有 em 和 /em。无论我点击多少次，我得到的结果总是添加 beg_tag。
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 不太熟悉，我的大部分编程都是用 PHP 完成的，所以我不熟悉是否有任何内置函数可以做到这一点。
回答by MattDiamant
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.
这应该有效。不是为每个标签名称创建一个单独的变量，而是为每个标签创建一个带有索引的对象。然后，您可以通过传递给 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>
回答by Sagar Kadam
You Need to change your code over here Since in javascript there is nothing like pass by reference
您需要在这里更改您的代码因为在 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>
回答by ?т?
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>
回答by Frosch
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
在此处查看操作：jsfiddle
