DOM-JavaScript, imprimir SÓLO un idioma al cambiar la opción de un SELECT
Publicado por Dani (3 intervenciones) el 03/05/2017 15:53:39
Saludos, un compañero me ha comentado que acudió a este lugar y le ayudasteis, por ello ahora soy yo el que acude a vosotros. El título no se si es muy descriptivo, intentaré explicarme.
Andamos en clase creando una web con DOM y JavaScript. La tengo finalizada, sin embargo me surge una duda o más bien una inquietud. Tengo una web (todos en clase la tenemos igual) y en un desplegable hay cuatro opciones...
1- Elije idioma
2- Castellano
3- Inglés
4- Valenciano
... el asunto está en que si yo elijo un idioma me lo muestra y el resto está oculto, hasta ahí bien, pero si después elijo otro idioma SIN RECARGAR la web (F5) me sigue manteniendo en pantalla el idioma seleccionado anteriormente. ¿Habría algún modo de que eso no sucediese? Es decir... Si elijo Castellano que sea vea Castellano, pero al elegir después Valenciano, que se vea Valenciano y desaparezca el contenido en Castellano.
He probado con if, pero no termino de cuadrarlo y quizás esté afrontándolo mal. ¿Podríais echarme una mano? No se si estaré adelantándome a la clase pero llevo dos o tres días "encabezonado" en intentar sacarlo y no lo consigo. Tampoco termino de encontrar ayuda en la web.
Este es el html:
Este es mi archivo JS:
Y finalmente mi breve CSS:
Se acepta cualquier consejo y por supuesto os doy las gracias por leerme y por lo que creáis conveniente comentar. Un saludo y reitero mis gracias!!!
Andamos en clase creando una web con DOM y JavaScript. La tengo finalizada, sin embargo me surge una duda o más bien una inquietud. Tengo una web (todos en clase la tenemos igual) y en un desplegable hay cuatro opciones...
1- Elije idioma
2- Castellano
3- Inglés
4- Valenciano
... el asunto está en que si yo elijo un idioma me lo muestra y el resto está oculto, hasta ahí bien, pero si después elijo otro idioma SIN RECARGAR la web (F5) me sigue manteniendo en pantalla el idioma seleccionado anteriormente. ¿Habría algún modo de que eso no sucediese? Es decir... Si elijo Castellano que sea vea Castellano, pero al elegir después Valenciano, que se vea Valenciano y desaparezca el contenido en Castellano.
He probado con if, pero no termino de cuadrarlo y quizás esté afrontándolo mal. ¿Podríais echarme una mano? No se si estaré adelantándome a la clase pero llevo dos o tres días "encabezonado" en intentar sacarlo y no lo consigo. Tampoco termino de encontrar ayuda en la web.
Este es el html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html version="-//W3C//DTD XHTML 1.1//EN"
xmlns="http://www.w3.org/1999/xhtml" xml:lang="es"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.w3.org/1999/xhtml
http://www.w3.org/MarkUp/SCHEMA/xhtml11.xsd">
<head>
<link rel="stylesheet" type="text/css" href="ejemplo2.css" media="screen"/>
<script type="text/javascript" src="ejemplo2.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Selección Idiomas mediante DOM</title>
</head>
<body>
<div>
<select id="selIdioma" onchange="seleccion();">
<option value="idioma" selected> Idioma/Language/Idioma </option>
<option value="spanish"> Castellano </option>
<option value="english"> English </option>
<option value="valencian"> Valencià </option>
</select>
</div>
<div class="spanish invisible">
<h1>Ejemplo de selección de Idiomas mediante DOM</h1>
<h2>Documento en Castellano</h2>
<p>Usted ha elegido contemplar el documento en Castellano.</p>
</div>
<div class="english invisible">
<h1>DOM Language Selection Example</h1>
<h2>English Document</h2>
<p>You have chosen to contemplate the document in English.</p>
</div>
<div class="valencian invisible">
<h1>Exemple de selecció d'Idiomes per mitjà de DOM</h1>
<h2>Document en Valencià</h2>
<p>Vosté ha triat contemplar el document en Valencià.</p>
</div>
</body>
</html>Este es mi archivo JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function seleccion(){
var selectBox = document.getElementById("selIdioma");
var selectValue = selectBox.options[selectBox.selectedIndex].value;
mostrar(selectValue);
}function mostrar(lengua){
var selectLengua = document.getElementsByClassName(lengua);
for (var i=0; i<selectLengua.length; i++){
selectLengua[i].setAttribute("class", selectLengua+" visible");
}}Y finalmente mi breve CSS:
1
2
3
4
5
6
.invisible{
display: none;}.visible{
display: block;}Se acepta cualquier consejo y por supuesto os doy las gracias por leerme y por lo que creáis conveniente comentar. Un saludo y reitero mis gracias!!!
Valora esta pregunta
0
