Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Varios ID en un mismo getElementById

Estas en el tema de Varios ID en un mismo getElementById en el foro de Javascript en Foros del Web. Hola buenas, ando un poco apurado con este problema: Tengo la siguiente funcion: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código Javascript : Ver original function mostrar_input ( )   ...
  #1 (permalink)  
Antiguo 30/05/2014, 12:46
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 10 meses
Puntos: 5
Varios ID en un mismo getElementById

Hola buenas, ando un poco apurado con este problema:

Tengo la siguiente funcion:

Código Javascript:
Ver original
  1. function mostrar_input()
  2.             {
  3.             document.getElementById("nombre_1").style.display="block";
  4.             }

EL asunto es que "nombre_1" hace referencia al id de un div.

Pero podria añadir a esta funcion mas nombres de id de divs, algo asi como esto:


Código Javascript:
Ver original
  1. function mostrar_input()
  2.             {
  3.             document.getElementById("nombre_1, nombre_2, nombre_3").style.display="block";
  4.             }

Es que hice esto ultimo pero no me funciona.

Pueden ayudarme?

Gracias de antemano.
  #2 (permalink)  
Antiguo 30/05/2014, 13:39
Colaborador
 
Fecha de Ingreso: septiembre-2013
Ubicación: España
Mensajes: 3.648
Antigüedad: 10 años, 6 meses
Puntos: 578
Respuesta: Varios ID en un mismo getElementById

Es normal que no funcione, no puedes inventarte el lenguaje...

El código que pones parece una "imitación" al modelo de Jquery, pero estás JavaScript nativo, y debes establecer esa propiedad elemento por elemento, de uno en uno.

También podrías poner una clase a dichos divs, obtenerlos con document.getElementsByClassName y recorrer el array obtenido mediante iteraciones.

Última edición por PHPeros; 30/05/2014 a las 13:45
  #3 (permalink)  
Antiguo 30/05/2014, 15:12
Avatar de ipraetoriux  
Fecha de Ingreso: abril-2010
Ubicación: ipraetoriux.com
Mensajes: 1.125
Antigüedad: 13 años, 11 meses
Puntos: 154
Respuesta: Varios ID en un mismo getElementById

...con Javascript nativo no podes implementar lo que pretendes, podes hacer algo asi con algun framework como jQuery o Prototype, por ejemplo...

Código Javascript:
Ver original
  1. $("#nombre_1, #nombre_2, #nombre_3").css({display: "block"});
  #4 (permalink)  
Antiguo 30/05/2014, 17:34
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 10.037
Antigüedad: 16 años
Puntos: 1329
Respuesta: Varios ID en un mismo getElementById

Sí, se puede con Javascript nativo: https://developer.mozilla.org/en-US/...erySelectorAll

Saludos
__________________
Grupo Telegram Docker en Español
  #5 (permalink)  
Antiguo 30/05/2014, 18:35
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Varios ID en un mismo getElementById

Y si quieres hacerlo compatible con todos los navegadores (incluido IE 6 en adelante):

Código Javascript:
Ver original
  1. var selecciona = function(ids){
  2.     var valores = ids.split(",");
  3.     for (var i in valores)
  4.         document.getElementById(valores[i].replace(/\s/g, "")).style.display = "block";
  5. };
  6.  
  7. selecciona("nombre_1, nombre_2, nombre_3");

Quito los posibles espacios que hayan con el método replace en caso de que hayan, para que así la llamada a la función se ejecute sin problema con o sin espacios entre los argumentos. Todos los métodos que utilicé, funcionan en todas las versiones de los navegadores más populares, incluidas las versiones de Internet Explorer 6, 7 y 8 que son las que más problemas acarrean.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 31/05/2014 a las 00:55 Razón: Fe de errata
  #6 (permalink)  
Antiguo 31/05/2014, 00:39
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 10 meses
Puntos: 5
Respuesta: Varios ID en un mismo getElementById

Ante todo muchas gracias por la ayuda a todos.

Alexis, mira, de javascript se muy poco pero lo intento.

He intentado inplementar el codigo que me pasaste en el siguiente ejemplo:

Código Javascript:
Ver original
  1. var mostrar_input = function(ids){
  2.                 var valores = ids.split(",");
  3.                 for (var i in valores)
  4.                     document.getElementById(valores[i].replace(/\s/g, "").style.display = "block";
  5.             };
  6.              
  7.             selecciona("nombre_1, nombre_2, nombre_3");
  8.  
  9.  
  10.  
  11.  
  12.  
  13.             var ocultar_input = function(ids){
  14.                 var valores = ids.split(",");
  15.                 for (var i in valores)
  16.                     document.getElementById(valores[i].replace(/\s/g, "").style.display = "none";
  17.             };
  18.              
  19.             selecciona("nombre_1, nombre_2, nombre_3");


Código HTML:
Ver original
  1. <select name="" id="" >
  2.            
  3.                 <option value="elija una opcion" onclick="ocultar_input()">elija una opcion</option>
  4.                 <option value="1" onclick="mostrar_input()">campo1</option>
  5.                 <option value="2" onclick="mostrar_input()">campo2</option>
  6.                 <option value="3" onclick="mostrar_input()">campo3</option>
  7.                            
  8.             </select>
  9.  
  10.  
  11.  
  12.             <div id="nombre_1" style="display:none"> <input type="text" name="" id=""/> </div>
  13.  
  14.             <div id="nombre_2" style="display:none"> <input type="text" name="" id=""/> </div>
  15.  
  16.             <div id="nombre_3" style="display:none"> <input type="text" name="" id=""/> </div>


Pero no funciona, y da error en la linea:

Código Javascript:
Ver original
  1. document.getElementById(valores[i].replace(/\s/g, "").style.display = "block";

He detectado que error mas concretamente parece estar en:

valores[i].replace(/\s/g, ""

Help!!!!
  #7 (permalink)  
Antiguo 31/05/2014, 00:55
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Varios ID en un mismo getElementById

Acabo de ver que se me olvidó cerrar un paréntesis, eso me pasa por hacer 4 cosas a la vez.

Esa línea debe quedar así:

Código Javascript:
Ver original
  1. document.getElementById(valores[i].replace(/\s/g, "")).style.display = "block";

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #8 (permalink)  
Antiguo 31/05/2014, 01:08
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 10 meses
Puntos: 5
Respuesta: Varios ID en un mismo getElementById

Alexis88, el problema de error efectivamente esta solucionado, faltaba un parentesis.


pero sigue sin mostrarme/ocultarme los divs


Código Javascript:
Ver original
  1. var mostrar_input = function(ids){
  2.                 var valores = ids.split(",");
  3.                 for (var i in valores)
  4.                     document.getElementById(valores[i].replace(/\s/g, "")).style.display = "block";
  5.             };
  6.              
  7.             selecciona("nombre_1, nombre_2, nombre_3");
  8.  
  9.  
  10.  
  11.  
  12.  
  13.             var ocultar_input = function(ids){
  14.                 var valores = ids.split(",");
  15.                 for (var i in valores)
  16.                     document.getElementById(valores[i].replace(/\s/g, "")).style.display = "none";
  17.             };
  18.              
  19.             selecciona("nombre_1, nombre_2, nombre_3");


Código HTML:
Ver original
  1. <select name="" id="" >
  2.            
  3.                 <option value="elija una opcion" onclick="ocultar_input()">elija una opcion</option>
  4.                 <option value="1" onclick="mostrar_input()">campo1</option>
  5.                 <option value="2" onclick="mostrar_input()">campo2</option>
  6.                 <option value="3" onclick="mostrar_input()">campo3</option>
  7.                            
  8.             </select>
  9.  
  10.  
  11.  
  12.             <div id="nombre_1" style="display:none"> <input type="text" name="" id=""/> </div>
  13.  
  14.             <div id="nombre_2" style="display:none"> <input type="text" name="" id=""/> </div>
  15.  
  16.             <div id="nombre_3" style="display:none"> <input type="text" name="" id=""/> </div>
  #9 (permalink)  
Antiguo 31/05/2014, 01:18
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Varios ID en un mismo getElementById

Pues así como se ve el código, noto que primero muestras a los elementos y luego los ocultas, además, podrías reutilizar la función:

Código Javascript:
Ver original
  1. var selecciona = function(ids, propiedad, valor){
  2.     var valores = ids.split(",");
  3.     for (var i in valores)
  4.         document.getElementById(valores[i].replace(/\s/g, "")).style[propiedad] = valor;
  5. };
  6.  
  7. selecciona("nombre_1, nombre_2, nombre_3", "display", "block");

Un ejemplo en ejecución:



Edito: ¿Te has dado cuenta de que en ambos casos tratas de ejecutar a la función selecciona cuando tus funciones se llaman mostrar_input y ocultar_input?
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 31/05/2014 a las 01:27 Razón: Observación
  #10 (permalink)  
Antiguo 31/05/2014, 02:51
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 10 meses
Puntos: 5
Respuesta: Varios ID en un mismo getElementById

A ver si lo entiendo

He hecho lo siguiente:

Código Javascript:
Ver original
  1. var mostrar_input = function(ids){
  2.                 var valores = ids.split(",");
  3.                 for (var i in valores)
  4.                     document.getElementById(valores[i].replace(/\s/g, "")).style.display = "block";
  5.             };
  6.              
  7.             mostrar_input("nombre_1, nombre_2, nombre_3");
  8.  
  9.  
  10.  
  11.  
  12.  
  13.             var ocultar_input = function(ids){
  14.                 var valores = ids.split(",");
  15.                 for (var i in valores)
  16.                     document.getElementById(valores[i].replace(/\s/g, "")).style.display = "none";
  17.             };
  18.              
  19.             ocultar_input("nombre_1, nombre_2, nombre_3");


Código HTML:
Ver original
  1. <select name="" id="" >
  2.            
  3.                 <option value="elija una opcion" onclick="ocultar_input()">elija una opcion</option>
  4.                 <option value="1" onclick="mostrar_input()">campo1</option>
  5.                 <option value="2" onclick="mostrar_input()">campo2</option>
  6.                 <option value="3" onclick="mostrar_input()">campo3</option>
  7.                            
  8.             </select>
  9.  
  10.  
  11.  
  12.             <div id="nombre_1" style="display:none"> <input type="text" name="" id=""/> </div>
  13.  
  14.             <div id="nombre_2" style="display:none"> <input type="text" name="" id=""/> </div>
  15.  
  16.             <div id="nombre_3" style="display:none"> <input type="text" name="" id=""/> </div>


En resumen lo que intento es que pueda tener varios select desplegables cada uno con opciones "option".

Y que cuando elija alguna opcion de uno o mas select , estos muestren su correspondiente input.


Este que te pongo es el ultimo codigo modificado , creo que como me has aconsejado pero se resiste a salir, o mi cabeza se resiste a entenderlo .

Pero sigue sin ir
  #11 (permalink)  
Antiguo 31/05/2014, 03:22
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Varios ID en un mismo getElementById

Pues, insisto en que debes de reutilizar código, ya que ambas funciones realizan algo similar, sin embargo, hay otras formas para hacer lo que buscas. Esta es una mejorable forma que funciona hasta en IE 6:

Código Javascript:
Ver original
  1. var combo = document.getElementsByTagName("select")[0];
  2. combo.onchange = function(){
  3.     var valores = new Array("nombre_1", "nombre_2", "nombre_3");
  4.     for (var i in valores){
  5.         var id = valores[i];
  6.         if (id[id.length - 1] == combo.value)
  7.             document.getElementById(id).style.display = "block";
  8.         else
  9.             document.getElementById(id).style.display = "none";
  10.     }
  11. };

Cada vez que se elija un valor del combo, buscamos entre los id de los <div>, alguno cuyo último caracter (el número), sea igual al valor seleccionado en el combo; en caso de haber una coincidencia, se procede a mostrar el respectivo <div>, caso contrario, se lo oculta. Pude haber hecho esto utilizando menos líneas de código y de una manera más eficiente, pero lo hice así para que sea lo más legible posible (y por el sueño que tengo a esta hora ), además de utilizar métodos que funcionen en todos los navegadores posibles.

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 31/05/2014 a las 03:32 Razón: Mejora
  #12 (permalink)  
Antiguo 31/05/2014, 03:50
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 10 meses
Puntos: 5
Respuesta: Varios ID en un mismo getElementById

Me estoy frustrando, en serio.

Mas o menos entiendo el codigo este ultimo que has puesto (pero no se javascript a tu nivel).


Y no se implementarselo al select que te he puesto para que se vean los inputs al seleccionar alguna option del select.

Y mira que lo estoy intentando.

Alexis, por favor, implentame este codigo que has puesto con un select si no es mucho pedir.

Me ayudaria mucho a entenderlo , por que como digo no se como enlazarlo con el select y que se vean los input.

Por favor.
  #13 (permalink)  
Antiguo 31/05/2014, 11:31
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.551
Antigüedad: 12 años, 4 meses
Puntos: 977
Respuesta: Varios ID en un mismo getElementById

Pero si es lo que hice (y que no debí hacer).

Si tienes otros elementos <select>, asígnale un id al que quieres afectar y cambia la primera línea del código JS que te di por esta:

Código Javascript:
Ver original
  1. var combo = document.getElementById("id_del_combo");

Saludos
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand
  #14 (permalink)  
Antiguo 31/05/2014, 12:37
 
Fecha de Ingreso: mayo-2012
Mensajes: 760
Antigüedad: 11 años, 10 meses
Puntos: 5
Respuesta: Varios ID en un mismo getElementById

Gracias alexis, no te arrepientas de haberlo hecho me has ayudado y enseñado mucho.

y por tu paciencia.

Etiquetas: funcion, getelementbyid, input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:48.