我希望有人能帮助我用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>
答案 0 :(得分:0)
您已在变量声明optionT1
,optionT2
,optionT3
和optionT4
上方的行末尾放置逗号而不是分号。