未捕获的ReferenceError:未定义addFields

时间:2017-12-06 16:12:44

标签: javascript

我希望有人能帮助我用javascript解决这个小问题。我确实创建了一个javascript函数,根据用户从选择框中选择的值自动呈现2种不同的表单。用户单击按钮时会触发该功能。问题是不会生成表单而是收到错误消息:"未捕获的ReferenceError:未定义addFields"。

Html代码:

<div class="form-group " style="margin-left: 80%">

                                    <div class="col-sm-10">
                                        <button type="button" class="btn btn-success btn-lg" onclick="addFields()">Formular erstellen</button>
                                    </div>
                                </div>

Javascript代码:

<script type="text/javascript">
        function addFields() {
            // Number of inputs to create
            var number = document.getElementById("anzahlFragen").value;
            // Type of Quiz
            var type = document.getElementById("quizTyp");
            var selectedType = type.options[type.selectedIndex].text;
            // Container <div> where dynamic content will be placed
            var myContainer = document.getElementById("myContainer");
            // Clear previous contents of the container
            while (myContainer.hasChildNodes()) {
                myContainer.removeChild(myContainer.lastChild);
            }
            if (selectedType === "Multiple choices") {
                for (i = 1; i <= number; i++) {

                    var div1 = document.createElement("div");
                    div1.className = "form-group";
                    var div2 = document.createElement("div");
                    div2.className = "col-sm-9";
                    var labelFr = document.createElement("label");
                    var tFr = document.createTextNode("Frage Nr " + i);
                    labelFr.appendChild(tFr);
                    labelFr.className = "col-sm-2 control-label";
                    div1.appendChild(labelFr);
                    var inputFr = document.createElement("input");
                    inputFr.type = "text";
                    inputFr.name = "frage" + i;
                    inputFr.className = "form-control round-form";
                    div2.appendChild(inputFr);
                    div2.appendChild(document.createElement("br"));

                    for (j = 1; j <= 4; j++) {

                        var labelAn = document.createElement("label");
                        var tAn = document.createTextNode("Antwort Nr " + i + j);
                        labelAn.appendChild(tAn);
                        div2.appendChild(labelAn);
                        var inputAn = document.createElement("input");
                        inputAn.type = "text";
                        inputAn.name = "antwort" + i + j;
                        inputAn.className = "form-control round-form";
                        div2.appendChild(inputAn);
                        var labelRichtig = document.createElement("label");
                        var tRichtig = document.createTextNode("Richtig " + i + j);
                        labelRichtig.appendChild(tRichtig);
                        div2.appendChild(labelRichtig);
                        var richtigAn = document.createElement("input");
                        richtigAn.type = "radio";
                        richtigAn.name = "Richtig" + i;
                        div2.appendChild(richtigAn);
                        div2.appendChild(document.createElement("br"));
                        div2.appendChild(document.createElement("br"));

                    }
                    div1.appendChild(div2);
                    myContainer.appendChild(div1);
                    myContainer.appendChild(document.createElement("br"));
                }
            } else {
                for (i = 1; i <= number; i++) {

                    var div1 = document.createElement("div");
                    div1.className = "form-group";
                    var div2 = document.createElement("div");
                    div2.className = "col-sm-9";
                    var labelFr = document.createElement("label");
                    var tFr = document.createTextNode("Frage Nr " + i);
                    labelFr.appendChild(tFr);
                    labelFr.className = "col-sm-2 control-label";
                    div1.appendChild(labelFr);
                    var inputFr = document.createElement("input");
                    inputFr.type = "text";
                    inputFr.name = "frage" + i;
                    inputFr.className = "form-control round-form";
                    div2.appendChild(inputFr);
                    div2.appendChild(document.createElement("br"));

                    for (j = 1; j <= 4; j++) {

                        var labelAn = document.createElement("label");
                        var tAn = document.createTextNode("Antwort Nr " + i + j);
                        labelAn.appendChild(tAn);
                        div2.appendChild(labelAn);
                        var inputAn = document.createElement("input");
                        inputAn.type = "text";
                        inputAn.name = "antwort" + i + j;
                        inputAn.className = "form-control round-form";
                        div2.appendChild(inputAn);
                        var profilAn = document.createElement("select");
                        profilAn.name = "profil" + i + j;
                        div2.appendChild(profilAn);

                        optionAn1 = document.createElement("option");
                        optionAn1.setAttribute("value", "1"),
                        var optionT1 = document.createTextNode("Profil 1");
                        optionAn1.appendChild(optionT1);

                        optionAn2 = document.createElement("option");
                        optionAn2.setAttribute("value", "2"),
                        var optionT2 = document.createTextNode("Profil 2");
                        optionAn2.appendChild(optionT2);

                        optionAn3 = document.createElement("option");
                        optionAn3.setAttribute("value", "3"),
                        var optionT3 = document.createTextNode("Profil 3");
                        optionAn3.appendChild(optionT3);

                        optionAn4 = document.createElement("option");
                        optionAn4.setAttribute("value", "4"),
                        var optionT4 = document.createTextNode("Profil 4");
                        optionAn4.appendChild(optionT4);

                        document.getElementsByTagName("select").appendChild(optionAn1);
                        document.getElementsByTagName("select").appendChild(optionAn2);
                        document.getElementsByTagName("select").appendChild(optionAn3);
                        document.getElementsByTagName("select").appendChild(optionAn4);

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

                    }
                    div1.appendChild(div2);
                    myContainer.appendChild(div1);
                    myContainer.appendChild(document.createElement("br"));
                }
            }
        }
    </script>

1 个答案:

答案 0 :(得分:0)

您已在变量声明optionT1optionT2optionT3optionT4上方的行末尾放置逗号而不是分号。