Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » No consigo mostrar y ocultar tres idiomas en una web sencilla

JavaScript - No consigo mostrar y ocultar tres idiomas en una web sencilla

Volver
Nuevo Tema
<<>>
 
Vista:

No consigo mostrar y ocultar tres idiomas en una web sencilla

Publicado por Jesús (5 intervenciones) el 30/04/2017 19:12:59
Saludos... acudo a vosotros porque ya no se qué hacer (y la opción de saltar por la ventana de momento está descartada). Estoy intentando hacer una web SUPER sencilla en la que hay varios idiomas y quiero mostrar uno y esconder el resto. Tengo un html por una parte, un CSS por la otra y un fichero JS. El fichero JavaScript no os lo añado porque ya no se qué he hecho con él, tengo demasiadas pruebas sobre él, he borrado líneas, he añadido... Y ya no se qué demonios hacer. He intentado tantas cosas que es un hecho el que he dañado mi archivo.

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
52
53
54
<?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 selected value=""> Idioma/Language/Llengua </option> -->
		  <option  selected value="castellano"> Castellano </option>
		  <option value="ingles"> English </option>
		  <option value="valenciano"> Valencià </option>
		</select>
	</div>
 
 
	<div name="spanish" class="visible">
		<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 name="english" class="invisible">
		<h1>DOM Language Selection Example</h1>
	    	<h2>English Document</h2>
		<p>You have chosen to contemplate the document in English.</p>
	</div>
 
	<div name="valencian" class="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 el CSS:

1
2
3
4
5
6
7
.invisible{
display: none;
}
 
.visible{
display: block;
}

En principio quise hacerlo con un desplegable con 4 opciones.

1- Elije idioma
2- castellano
3- ingles
4- valenciano

Con todo el texto oculto y sólo visible el desplegable, pero para no liarme he puesto la primera opción oculta, pero ya os digo. Lo he intentado con tantas opciones que no he conseguido nada aún. Y ya estoy por tirar la toalla. Quizás tenga mucho lío aún con el tema funciones, otra cosa no puedo contaros.

Agradecería cualquier tipo de ayuda. Un saludo y mil gracias!!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de ab10
Val: 477
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

No consigo mostrar y ocultar tres idiomas en una web sencilla

Publicado por ab10 (130 intervenciones) el 01/05/2017 01:29:31
Hola Jesús, modifique tu codigo, haber si esto es lo que buscas.

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
<div>
    <select id="selIdioma">
        <option selected value="spanish"> Castellano </option>
        <option value="english"> English </option>
        <option value="valencian"> Valencià </option>
    </select>
</div>
 
 
<div name="spanish" class="visible">
    <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 name="english" class="invisible">
    <h1>DOM Language Selection Example</h1>
    <h2>English Document</h2>
    <p>You have chosen to contemplate the document in English.</p>
</div>
 
<div name="valencian" class="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>

JS
1
2
3
4
5
6
7
8
9
10
11
12
window.onload = function() {
var select = document.getElementById('selIdioma');
select.addEventListener('change', function() {
    var opt = this.value;
    var element = document.getElementsByName(opt)[0];
    var currentElement = document.querySelector('.visible');
    currentElement.classList.remove('visible');
    currentElement.classList.add('invisible');
    element.classList.add('visible');
    element.classList.remove('invisible');
});
};

Nos comentas. Un saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar

No consigo mostrar y ocultar tres idiomas en una web sencilla

Publicado por Jesús (5 intervenciones) el 01/05/2017 09:58:56
Mil gracias!! Era exactamente lo que necesitaba, aunque me comentaron que lo hiciese con estas instrucciones

Esto para seleccionar la opción del desplegable

1
2
3
var selectBox = document.getElementByID("selIdioma");
var selectValue = selectBox.options[selectBox.selectedIndex].value;
mostrar(selectValue);

Y esto otro para cambiarle la "class" y mantenerlo oculto o visible

1
2
3
var element = document.getElementByName(idiomaMostrar);
for (var i=0; i<element.lenght;i++){
element.setAttribute("class", "visible");

Del modo que me explicaron te salen varias funciones y aparentemente tu solución parece más sencilla. Gracias!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar