Estoy inciándome en javascript para darle funcionales a mis hojas de html.
Estoy realizando un formulario en html a modo de práctica de preguntas y respuestas de tal manera que contenga respuestas del tipo "Si, No, Especificar" y que dependiendo de si elige la opcion Especificar, se muestre un textarea que por defecto está oculto.
Si el formulario consta de 1 o 2 preguntas, la función que realicé me sirve, pero si el formulario tiene 10, 20, 30 preguntas, la forma en que lo estoy haciendo ya no es eficiente.
Les dejo el ejercicio para que puedan entender lo que indico.
Como podría realizar una función para no tener que escribir una función por cada pregunta?
<!DOCTYPE html>
<html>
<body>
<label>Pregunta1</br>
<select onchange="f1(this)">
<optgroup label="Elegir">
<option value="No" selected>No</option>
<option value="Si">Si</option>
<option value="especificar" id="esp">Especificar</option>
</optgroup>
</select></br>
<textarea id = "area1" style = "display: none;"></textarea>
</br></br>
<label>Pregunta1</br>
<select onchange="f2(this)">
<optgroup label="Elegir">
<option value="No" selected>No</option>
<option value="Si">Si</option>
<option value="especificar" id="esp">Especificar</option>
</optgroup>
</select>
<textarea id = "area2" style = "display: none;"></textarea>
</br></br>
<script>
function f1 (self) {
if (self.value == "especificar"){
document.getElementById("area1").style.display = 'Block'
}
else {
document.getElementById("area1").style.display = 'none'
}
}
function f2 (self) {
if (self.value == "especificar"){
document.getElementById("area2").style.display = 'Block'
}
else {
document.getElementById("area2").style.display = 'none'
}
}
</script>
</body>
</html>