[SOLUCIONADO] Varios ID en un mismo getElementById

[mensajeescrito]

Hola buenas, ando un poco apurado con este problema:

Tengo la siguiente funcion:

Código Javascript:

function mostrar_input()
            {
            document.getElementById("nombre_1").style.display="block";
            }
 

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:

function mostrar_input()
            {
            document.getElementById("nombre_1, nombre_2, nombre_3").style.display="block";
            }
 

Es que hice esto ultimo pero no me funciona.

Pueden ayudarme?

Gracias de antemano.

[PHPeros]

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.

[ipraetoriux]

...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:

$("#nombre_1, #nombre_2, #nombre_3").css({display: "block"});
 

[Carlangueitor]

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

Saludos

[Alexis88]

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

Código Javascript:

var selecciona = function(ids){
    var valores = ids.split(",");
    for (var i in valores)
        document.getElementById(valores[i].replace(/\s/g, "")).style.display = "block";
};
 
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

[mensajeescrito]

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:

var mostrar_input = function(ids){
                var valores = ids.split(",");
                for (var i in valores)
                    document.getElementById(valores[i].replace(/\s/g, "").style.display = "block";
            };
             
            selecciona("nombre_1, nombre_2, nombre_3");
 
 
 
 
 
            var ocultar_input = function(ids){
                var valores = ids.split(",");
                for (var i in valores)
                    document.getElementById(valores[i].replace(/\s/g, "").style.display = "none";
            };
             
            selecciona("nombre_1, nombre_2, nombre_3");
 

Código HTML:

<select name="" id="" >
            
                <option value="elija una opcion" onclick="ocultar_input()">elija una opcion</option>
                <option value="1" onclick="mostrar_input()">campo1</option>
                <option value="2" onclick="mostrar_input()">campo2</option>
                <option value="3" onclick="mostrar_input()">campo3</option>
                            
            </select>
 
 
 
            <div id="nombre_1" style="display:none"> <input type="text" name="" id=""/> </div>
 
            <div id="nombre_2" style="display:none"> <input type="text" name="" id=""/> </div>
 
            <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:

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!!!!

[Alexis88]

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:

document.getElementById(valores[i].replace(/\s/g, "")).style.display = "block";
 

Saludos

[mensajeescrito]

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


pero sigue sin mostrarme/ocultarme los divs

Código Javascript:

var mostrar_input = function(ids){
                var valores = ids.split(",");
                for (var i in valores)
                    document.getElementById(valores[i].replace(/\s/g, "")).style.display = "block";
            };
             
            selecciona("nombre_1, nombre_2, nombre_3");
 
 
 
 
 
            var ocultar_input = function(ids){
                var valores = ids.split(",");
                for (var i in valores)
                    document.getElementById(valores[i].replace(/\s/g, "")).style.display = "none";
            };
             
            selecciona("nombre_1, nombre_2, nombre_3");
 

Código HTML:

<select name="" id="" >
            
                <option value="elija una opcion" onclick="ocultar_input()">elija una opcion</option>
                <option value="1" onclick="mostrar_input()">campo1</option>
                <option value="2" onclick="mostrar_input()">campo2</option>
                <option value="3" onclick="mostrar_input()">campo3</option>
                            
            </select>
 
 
 
            <div id="nombre_1" style="display:none"> <input type="text" name="" id=""/> </div>
 
            <div id="nombre_2" style="display:none"> <input type="text" name="" id=""/> </div>
 
            <div id="nombre_3" style="display:none"> <input type="text" name="" id=""/> </div>
 

[Alexis88]

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:

var selecciona = function(ids, propiedad, valor){
    var valores = ids.split(",");
    for (var i in valores)
        document.getElementById(valores[i].replace(/\s/g, "")).style[propiedad] = valor;
};
 
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?

[mensajeescrito]

A ver si lo entiendo

He hecho lo siguiente:

Código Javascript:

var mostrar_input = function(ids){
                var valores = ids.split(",");
                for (var i in valores)
                    document.getElementById(valores[i].replace(/\s/g, "")).style.display = "block";
            };
             
            mostrar_input("nombre_1, nombre_2, nombre_3");
 
 
 
 
 
            var ocultar_input = function(ids){
                var valores = ids.split(",");
                for (var i in valores)
                    document.getElementById(valores[i].replace(/\s/g, "")).style.display = "none";
            };
             
            ocultar_input("nombre_1, nombre_2, nombre_3");
 

Código HTML:

<select name="" id="" >
            
                <option value="elija una opcion" onclick="ocultar_input()">elija una opcion</option>
                <option value="1" onclick="mostrar_input()">campo1</option>
                <option value="2" onclick="mostrar_input()">campo2</option>
                <option value="3" onclick="mostrar_input()">campo3</option>
                            
            </select>
 
 
 
            <div id="nombre_1" style="display:none"> <input type="text" name="" id=""/> </div>
 
            <div id="nombre_2" style="display:none"> <input type="text" name="" id=""/> </div>
 
            <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

[Alexis88]

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:

var combo = document.getElementsByTagName("select")[0];
combo.onchange = function(){
    var valores = new Array("nombre_1", "nombre_2", "nombre_3");
    for (var i in valores){
        var id = valores[i];
        if (id[id.length - 1] == combo.value)
            document.getElementById(id).style.display = "block";
        else
            document.getElementById(id).style.display = "none";
    }
};
 

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

[mensajeescrito]

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.

[Alexis88]

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:

var combo = document.getElementById("id_del_combo");
 

Saludos

[mensajeescrito]

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

y por tu paciencia.