選択したオプションのタイプに応じて、1 つまたは 3 つのテキスト領域を表示したい、つまり、オプション "mc" が選択されている場合は 3 つのテキスト領域を表示したい。Javascript でこれを実行しようとしていますが、選択したオプションごとに 3 つのテキスト領域が表示されます。JS機能が動作していないと思います。どこが間違っているのか教えていただけないでしょうか。
ありがとう。
コード:
<head>
<link href="./css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h:form>
<script type="text/javascript">
function selectans(qtype) {
if (qtype == "mc")
{
alert("In MC type");
document.getElementById("formId:editor3").style.display = "block";
document.getElementById("formId:editor4").style.display = "block";
//document.form.editor3.disabled = false;
//document.form.editor4.disabled = false;
}
else {
document.getElementById("formId:editor3").style.display = "none";
document.getElementById("formId:editor4").style.display = "none";
//document.form.editor3.disabled = true;
//document.form.editor4.disabled = true;
}
}
</script>
Question Type:
<h:selectOneMenu id="qtype" value ="#{quizBean.qtype}" onchange="selectans(qtype) ">
<f:selectItem id="desc" itemLabel="Descriptive Type" itemValue="desc" />
<f:selectItem id="fill" itemLabel="Fill up the Blanks" itemValue="fill" />
<f:selectItem id="mc" itemLabel="Multiple Choice" itemValue="mc" />
<f:selectItem id="tf" itemLabel="True/False" itemValue="tf" />
</h:selectOneMenu>
Question: <h:inputTextarea id="editor1" value="#{quizBean.question}" rows="20" cols="75" /> <br></br>
Answer:
<h:inputText id ="editor2" value="#{quizBean.answerChoice2}" />
<h:inputText id ="editor3" value="#{quizBean.answerChoice2}" />
<h:inputText id ="editor4" value="#{quizBean.answerChoice3}" />
<h:commandButton value="Submit" action="#{quizBean.addQuestion}" />
</h:form>
</body>
CSS:
root {
display: block;
}
.hide {
display: none;
}