JavaScript 中的 onclick() 出现问题答案

【问题标题】：Having issues with onclick() in JavaScriptJavaScript 中的 onclick() 出现问题
【发布时间】：2016-03-16 05:24:20
【问题描述】：

我有一个复选框 - 当我选中它时，它会打印出一个下拉列表，但是当我取消选中它时，下拉列表不会消失。在取消选中后第二次单击（即总共第三次单击）整个页面消失；当我只想让下拉列表消失并保留复选框时。

我有下面的代码。

<?php 
include('dbcategory.php');

?>
<script type="text/javascript">


var app = true;



function rFields1(elm){
    if (app == false){

var tra = elm.parentNode.parentNode;
tra.remove();

    }
    app = true;
}

function addFields1(){
    if(app == true){    
    var container = document.getElementById("container1");
    var table = document.createElement("table");

    table.border=1; 
    table.cellspacing=0;     
    table.id ="education";
    table.name = "education[]";     
    container.appendChild(document.createTextNode(""));
    var tr = document.createElement("tr");

    var td1 = document.createElement("td");
    td1.valign = "top";

    var slct = document.createElement("select"); //? how do I fix this up
    slct.id = "institution";
    slct.name = "institution[]";
    //some php code that is generating js code
    <?php
    $sql1a = "SELECT * FROM levels ORDER BY id asc";
    $smt1a = $dbs->prepare($sql1a);
    $smt1a -> execute();
    while($row1a=$smt1a->fetch(PDO::FETCH_ASSOC))
    {
        echo("var opt=document.createElement(\"option\");\r\n");
        echo("opt.value='$row1a[level]';\r\n");
        echo("opt.text ='$row1a[level]';\r\n");
        echo("slct.appendChild(opt);");
    }
    ?>

    slct.value='<?php echo $_GET['id2']; ?>';                       //container.add(option);
    container.appendChild(slct);//? how do I fix this up
        //      select1.appendChild(option);
    td1.appendChild(slct);
    tr.appendChild(td1);




    container.appendChild(document.createElement("br"));


    table.appendChild(tr);  
    container.appendChild(table);   
    app = false;
    }

    else {
    colour.onclick=function(){
    rFields1(this);};   
        //  app = true;
    }
    }

</script>
<form id="myform" action="" align="center" method="post" enctype="multipart/form-data">
<div id="div2">
<table border="1" cellspacing="0" style="margin-top:12px width="900"">
<colgroup>
<col span="1">
</colgroup>

<input type="hidden" id="idz" name="idz">



<br><H2 align="center">EDUCATION</H2><br>
<div id="container1">
<table border="1" id="education" name="education[]" cellspacing="0" style="margin-top:12px width="900"">

<colgroup>
<col span="1">
</colgroup>
<input name="colour" id="colour" type="checkbox" onclick="addFields1()" />
<a href="#" type="hidden" id="Remove" name="Remove" onclick="rFields1(this)"></a>


</table>

</div>


</table>


</form>
<br>

Checkbox Unchecked By Default

Checked Checkbox printing out the dropdown list

Checkbox Unchecked - no change or effect

Second time the newly unchecked checkbox checked results in a Blank Screen

【问题讨论】：

我建议你更好地缩进你的代码，并确保这些链接正确地使用了降价（目前还没有）。否则，任何人都不太可能想通读缩进不佳的代码。
你不能只复制粘贴我插入的代码吗？
@BenStein 并不是每个看到这个的人都会复制你的代码并试图弄清楚它。如果它的格式正确，更多的人可以看一眼，看看是否有什么不对劲，而不是深入研究代码。此外，对于将来使用此问题的任何人来说，它只会让一切更有条理。
@BenStein 那是你的代码，那么你必须更好地呈现它。这里的人可以这样做，但是如果您要问一个问题，那么您应该这样做而不是询问答案提供者。如果你不知道该怎么做？请参观帮助中心。祝你好运。 ;)
好的，那我就修好了

标签： javascript function checkbox onclick double

【解决方案1】：

第一次单击复选框时，它会创建下拉菜单。第二次单击执行以下操作：

colour.onclick=function(){
rFields1(this);};

我不确定为什么它不会崩溃，因为颜色没有在任何地方定义，但我们假设它没有。它只会设置 onclick 函数，但不会执行它。所以第二次点击没有显示任何变化。第三次单击将删除复选框的父级父级，这基本上会删除您看到的所有内容。

我猜你必须写一些类似的东西

document.getElementById("education").remove();
app = true;

在你的其他情况下并摆脱 rFields1。

【讨论】：