Veo varios errores en tu código, principalmente de escribir mal una palabra, ten mucho cuidado con eso porque son errores que puedes arrastrar todo el código y luego no sabes qué es lo que falla.
El primer error es que estás creando la variable getSelectValue
, sin embargo luego intentas utilizarla llamándola select
. Además, en la variable almacenas el valor del value
y luego intentas coger de nuevo el value
de eso. Es decir, recoges el value
obtienes el valor "and" e intentas coger el value
de un string.
También comparas el string obtenido con variables que no existen. Si quieres saber si el valor obtenido es "and" debes compararlo con un string "and"
y no con una variable and
que no existe.
function showInp(){
var getSelectValue = document.getElementById("telprefix").value;
if(getSelectValue == "and"){
docuement.getElementById("andphone").style.display = "inline-block";
}
if(getSelectValue == "esp"){
docuement.getElementById("espphone").style.display = "inline-block";
}
if(getSelectValue == "fr"){
docuement.getElementById("frphone").style.display = "inline-block";
}
}
Además, durante todo el código está el error en que has escrito docuement
, debería ser document
. Al haber copiado y pegado una línea con este error, lo has arrastrado en el resto del código.
Así quedaría tu código funcionando, la teoría la has sabido poner en práctica, han sido errores al escribirlo:
function showInp(){
var getSelectValue = document.getElementById("telprefix").value;
if(getSelectValue=="and"){
document.getElementById("andphone").style.display = "inline-block";
}
if(getSelectValue=="esp"){
document.getElementById("espphone").style.display = "inline-block";
}
if(getSelectValue=="fr"){
document.getElementById("frphone").style.display = "inline-block";
}
}
if( document.getElementById("telprefix").value === "and"){
document.getElementById("andphone").addAttribute("required");
}
if( document.getElementById("telprefix").value === "esp"){
document.getElementById("espphone").addAttribute("required");
}
if( document.getElementById("telprefix").value === "fr"){
document.getElementById("frphone").addAttribute("required");
}
<select name="telprefix" id="telprefix" onchange="showInp()">
<option value="">--Prefix</option>
<option value="and">+376</option>
<option value="esp">+34</option>
<option value="fr">+33</option>
</select>
<input id="andphone" type="tel" pattern="[3]{9}-[3]{9}" style="display: none"/>
<input id="espphone" type="tel" pattern="[3]{9}-[3]{9}-[3]{9}" style="display: none"/>
<input id="frphone" type="tel" pattern="[1]{9}[3]{9}-[3]{9}-[3]{9}" style="display: none"/>
Ten en cuenta que el código fuera de la función nunca se ejecuta, es decir, los input
nunca son required
. Para ello deberías meter este código en la función.
Y sobre ocultar los inputs
que no se utilizan, al ponerlo en inline-block
sustituyes el que tienes en html por ese, por lo que deberías volver a decírselo.
Para que el código sea más limpio, lo he hecho todo en switch
ya que creo que te podrá ayudar a mantenerlo en el futuro:
function showInp(){
var getSelectValue = document.getElementById("telprefix").value;
switch (getSelectValue) {
case "and":
document.getElementById("andphone").style.display = "inline-block";
document.getElementById("andphone").setAttribute("required", "required");
document.getElementById("espphone").style.display = "none";
document.getElementById("frphone").style.display = "none";
break;
case "esp":
document.getElementById("espphone").style.display = "inline-block";
document.getElementById("espphone").setAttribute("required", "required");
document.getElementById("andphone").style.display = "none";
document.getElementById("frphone").style.display = "none";
break;
case "fr":
document.getElementById("frphone").style.display = "inline-block";
document.getElementById("frphone").setAttribute("required", "required");
document.getElementById("espphone").style.display = "none";
document.getElementById("andphone").style.display = "none";
break;
}
}
<select name="telprefix" id="telprefix" onchange="showInp()">
<option value="">--Prefix</option>
<option value="and">+376</option>
<option value="esp">+34</option>
<option value="fr">+33</option>
</select>
<input id="andphone" type="tel" pattern="[3]{9}-[3]{9}" style="display: none"/>
<input id="espphone" type="tel" pattern="[3]{9}-[3]{9}-[3]{9}" style="display: none"/>
<input id="frphone" type="tel" pattern="[1]{9}[3]{9}-[3]{9}-[3]{9}" style="display: none"/>