Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] document.getElementById

Estas en el tema de document.getElementById en el foro de Javascript en Foros del Web. Buenas noches: Sucede que al ejecutar onclick desde cualquiera de los input obtengo el mismo mensaje, que se corresponde con el del primer alert. Lo ...
  #1 (permalink)  
Antiguo 15/09/2016, 14:30
 
Fecha de Ingreso: noviembre-2005
Mensajes: 146
Antigüedad: 18 años, 5 meses
Puntos: 1
document.getElementById

Buenas noches:
Sucede que al ejecutar onclick desde cualquiera de los input obtengo el mismo mensaje, que se corresponde con el del primer alert. Lo que esperaba es que desde el primer input el mensaje fuera el de la primera condición y desde el segundo input el de la segunda condición. Así con el resto (En la función he dejado sólo la de los dos primeros para acortar el código) He revisado el código y no encuentro el posible error.
Gracias.


Código Javascript:
Ver original
  1. function ordenar_facturas()
  2. {
  3. if (document.getElementById('1asc').onclick){alert('Llamada desde triangulo');}
  4. else if(document.getElementById('1dsc').onclick){alert('Llamada desde triangulo invertido');}
  5. }

Código HTML:
Ver original
  1. <div class='cajadetitulos'>
  2.                                 <div class='titulos'>
  3.                                     <div class='caja_flecha'>
  4.                                             <input class='etiqueta' id='1' value= 'Presupuesto'>
  5.                                             <input class='flecha' id='1asc' value='▲' onclick= 'ordenar_facturas()'>
  6.                                             <input class='flecha' id='1dsc' value='▼' onclick= 'ordenar_facturas()'>
  7.                                     </div>
  8.                                 </div>
  9.  
  10.                                 <div class='titulos'>                                  
  11.                                         <div class='caja_flecha'>
  12.                                             <input class='etiqueta' id='2' value= 'Mes del evento'>
  13.                                             <input class='flecha' id='2asc' value='▲' onclick= 'ordenar_facturas()'>
  14.                                             <input class='flecha' id='2dsc' value='▼' onclick= 'ordenar_facturas()'>
  15.                                         </div>
  16.                                 </div>
  17.  
  18.                                 <div class='titulos'>
  19.                                         <div class='caja_flecha'>
  20.                                             <input class='etiqueta' id='3' value= 'Emitida el'>                                    
  21.                                             <input class='flecha' id='3asc' value='▲' onclick= 'ordenar_facturas()'>
  22.                                             <input class='flecha' id='3dsc' value='▼' onclick= 'ordenar_facturas()'>
  23.                                         </div>
  24.                                 </div>
  25.  
  26.                                 <div class='titulos'>                          
  27.                                         <div class='caja_flecha'>
  28.                                             <input class='etiqueta' id='4' value= 'Número'>
  29.                                             <input class='flecha' id='4asc' value='▲' onclick= 'ordenar_facturas()'>
  30.                                             <input class='flecha' id='4dsc' value='▼' onclick= 'ordenar_facturas()'>
  31.                                         </div>
  32.                                 </div>
  33.  
  34.                                 <div class='titulos'>                          
  35.                                         <div class='caja_flecha'>
  36.                                             <input class='etiqueta' id='5' value= 'Total'>
  37.                                             <input class='flecha' id='5asc' value='▲' onclick= 'ordenar_facturas()'>
  38.                                             <input class='flecha' id='5dsc' value='▼' onclick= 'ordenar_facturas()'>
  39.                                         </div>
  40.                                 </div>
  41.                     </div>
  #2 (permalink)  
Antiguo 15/09/2016, 14:40
 
Fecha de Ingreso: enero-2015
Ubicación: Cordoba, Andalucía
Mensajes: 111
Antigüedad: 9 años, 3 meses
Puntos: 15
Respuesta: document.getElementById

con jquery

$('#1asc').click(function(){
// codigo
});

$('#1dsc').click(function(){
// codigo
});
  #3 (permalink)  
Antiguo 15/09/2016, 14:56
Avatar de petit89  
Fecha de Ingreso: marzo-2011
Mensajes: 1.135
Antigüedad: 13 años, 1 mes
Puntos: 170
Respuesta: document.getElementById

Mira este ejemplo que hice con tu codigo.... lo aplique unicamente a los triangulos de TOTAL

https://jsfiddle.net/z4t0vqr3/
__________________
█ WebHosting / Reseller a bajo costo | Uptime Garantizado | Soporte en Español e Ingles
¿Te sirvió la respuesta? Deja un +1 (Triangulo negro al lado derecho)
  #4 (permalink)  
Antiguo 15/09/2016, 15:05
Avatar de cocu3  
Fecha de Ingreso: diciembre-2007
Mensajes: 235
Antigüedad: 16 años, 4 meses
Puntos: 6
Respuesta: document.getElementById

creo q lo siguiente no es valido como condición:

document.getElementById('1asc').onclick
__________________
editor de fotos
  #5 (permalink)  
Antiguo 15/09/2016, 15:52
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 12 años, 5 meses
Puntos: 977
Respuesta: document.getElementById

Como veo que tienes varios elementos similares que ejecutan la misma función pero entregando un diferente resultado según la opción seleccionada, te sugiero asignar una clase a todos los elementos y un atributo personalizado en el cual asignarás la orden a realizar.

Por ejemplo:
Código HTML:
Ver original
  1. <section id="ejemplo">
  2.     <button class="foo" data-foo="Javier">Saluda a Javier</button>
  3.     <button class="foo" data-foo="María">Saluda a María</button>
  4.     <button class="foo" data-foo="Estela">Saluda a Estela</button>
  5.     <button class="foo" data-foo="Gabriel">Saluda a Gabriel</button>
Código Javascript:
Ver original
  1. document.querySelector("#ejemplo").addEventListener("click", function(event){
  2.     if (event.target.className == "foo"){
  3.         alert("Hola, " + event.target.dataset.foo);
  4.     }
  5. }, false);

De esta manera, se delega el evento click al elemento contenedor de los botones (que también puede ser el documento o la ventana), se verifica si la clase del elemento afectado por el evento es igual al que asigné a los botones y, de ser así, se muestra el mensaje de alerta con el saludo que se concatena con el valor almacenado en el atributo personalizado del botón.

Adáptalo a lo que necesitas.

__________________
«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
  #6 (permalink)  
Antiguo 15/09/2016, 16:28
 
Fecha de Ingreso: noviembre-2005
Mensajes: 146
Antigüedad: 18 años, 5 meses
Puntos: 1
Respuesta: document.getElementById

Hola gracias a todos:
He aplicado la opción de petit89 y funciona.
Gracias por la aportación de todos.
Un cordial saludo.

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

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:03.