[SOLUCIONADO] Poner variable donde no la hay

[JUMASOL]

Hola,

Quiero aplicar una función mediante onchange a un input en caso de cambio, lo cual es bien simple, pero, he aquí el problema, se trata de que existen diversos inputs en diversas circunstancias y páginas. Así que se me ha ocurrido que lo mejor es insertar la variable allá donde sea necesaria para que funcione al cargarse la página. Es decir, se carga la página, y si existen inputs con un id determinado, se les añade la variable para que produzca el cambio deseado en caso de actuación por parte del usuario.

Los inputs que precisan la variable ya están identificados, así que, poniéndolo simple, se tratar de introducir:

onchange="elonchage(this);"

en un campo identificado ya a través del id, pasando de

Código:

<input id="elinput">

a

Código:

<input id="elinput" onchange="elonchage(this);">

¿Se puede?

Gracias.

[mpozo]

No. Para asignar un evento en línea, este ha de estar en el html. La manera de asignar eventos es con addEventListener(). Como estás usando ids y no pueden estar repetidas, no veo el problema. Quizás no he comprendido tu consulta

[JUMASOL]

Hola.

Lo he conseguido así:

Código:

 var x = document.getElementById("elinput"); 
x.setAttribute("onchange", "elonchage(this);");

Pero como soy nuevo en esto podría no ser la solución más adecuada.

¿Qué os parece?

Gracias.

[mpozo]

No es la más adecuada. Como te dije anteriormente, la manera correcta es usando addEventListener()

Código Javascript:

document.querySelector('#elinput').addEventListener('change', function() {elonchage(this)}, false);
 

.

Por otro lado, el evento onchange, no es el más adecuado para un campo input puesto que no se disparará hasta que pierda el foco (onblur)

[Alexis88]

Si son varios los elementos que deben ser afectados por el evento en cuestión, puedes asignarles la misma clase o quizá encontrar un dato identificador que sea similar en todos ellos y así registrar el evento globalmente para luego pasar a identificar al elemento directamente afectado por el evento, comprobar que posea la clase o dato identificador en común entre los elementos y, finalmente, ejecutar la función.

Código Javascript:

document.addEventListener("change", function(event){
    event.target.className == "ejemplo" && elonchage(event.target);
}, false);
 

En donde event.target es el elemento directamente afectado por el evento. De esta manera, puedes tener uno o muchos elementos que, al tener la clase en cuestión, serán afectados de igual forma. La mayor ventaja de delegar el evento es que incluso funciona con elementos añadidos dinámicamente (después de la carga del documento).

[JUMASOL]

Iniciado por mpozo

No es la más adecuada. Como te dije anteriormente, la manera correcta es usando addEventListener()

Código Javascript:

document.querySelector('#elinput').addEventListener('change', function() {elonchage(this)}, false);
 

.

Dejando a un lado el tema del input, te indico que esto no me ha funcionado. No inserta nada.

Además, soy nuevo y no me gustaría hacer las cosas sin entenderlas, y para contribuir a enriquecer el foro y a personas que como yo busquen este tipo de soluciones desde un conocimiento básico, me gustaría saber por qué es addEventListener() la forma más adecuada, y no la solución que puse inicialmente.

[JUMASOL]

Iniciado por Alexis88

Si son varios los elementos que deben ser afectados por el evento en cuestión, puedes asignarles la misma clase ....

No lo he dicho, pero estos distintos elemenos están en distintas secciones a lo largo del sitio. No importa la case. Sólo hay uno por página. Esto no es problema. Pero gracias por la respuesta.

[JUMASOL]

Otra cosa, según tengo leído addEventListener() no es aceptado por internet explorer 8, lo cual es prohibitivo. Necesito cubrir todos los navegadores sin excepción. No es un tema de estilo precisamente.

Gracias

[JUMASOL]

Disculpad,

Código:

document.querySelector('#elinput').addEventListener('change', function() {elonchage(this)}, false);

Sí funciona.

Pero, como dije, he comprobado que no lo hace en IE 8 y no puedo permitírmelo.

¿He investigado y leído sobre addEventListener y veo lo que es, pero necesito que funcione también en IE8 o tendré que buscar otra cosa o quedarme con el inicial.

attachEvent?

Esto me funciona en todo menos en IE8:

Código:

if (document.addEventListener) {                
document.querySelector('#elinput').addEventListener('change', function() {elonchage(this)}, false);
} else if (document.attachEvent) {     
document.querySelector('#elinput').attachEvent('change', function() {elonchage(this)}, false);        
}

[mpozo]

Iniciado por JUMASOL

Dejando a un lado el tema del input, te indico que esto no me ha funcionado. No inserta nada.

Algo has de estar haciendo mal

Iniciado por JUMASOL

Otra cosa, según tengo leído addEventListener() no es aceptado por internet explorer 8, lo cual es prohibitivo. Necesito cubrir todos los navegadores sin excepción. No es un tema de estilo precisamente.

Gracias

Lee esto y esto otro. Con ello solventarás tus dudas

Edito: Encontrastes la respuesta solo

[Alexis88]

Iniciado por JUMASOL

Esto me funciona en todo menos en IE8:

Código:

if (document.addEventListener) {                
document.querySelector('#elinput').addEventListener('change', function() {elonchage(this)}, false);
} else if (document.attachEvent) {     
document.querySelector('#elinput').attachEvent('change', function() {elonchage(this)}, false);        
}

El método .attachEvent() no requiere de un tercer argumento para determinar si se saltará o no la fase de captura; además, el nombre del evento debe tener un "on" al inicio:

Código Javascript:

document.querySelector('#elinput').attachEvent("onchange", elonchage);
 

Por cierto, en el caso de usar solo el método .addEventListener(), estableciendo el nombre de la función como segundo argumento (listener o callback), no es necesario pasarle el this como argumento ya que, el elemento en el cual se registró el evento (document.querySelector('#elinput')), puede ser accedido a través de dicha palabra reservada en el contexto de la función:

Código Javascript:

document.querySelector('#elinput').addEventListener("change", elonchage, false);
 
function elonchage(){
    console.log(this); //document.querySelector('#elinput')
}
 

Por cierto, se recomienda usar solo el método .addEventListener() ya que es más completo, en cuanto a las características que posee, sobre los métodos antecesores; además de contar con soporte por parte de la mayoría de navegadores modernos. Para evitar problemas de incompatibilidad con navegadores antiguos, puedes implementar este polyfill.

[JUMASOL]

He probado pero no me funciona en IE8, tal y como lo usas:

Código:

document.querySelector('#elinput').attachEvent("onchange", elonchage);

[Alexis88]

Inténtalo de la otra forma:

Código Javascript:

document.querySelector('#elinput').attachEvent("onchange", function(){
    elonchage(document.querySelector('#elinput'));
});
 

[JUMASOL]

Ahora sí, todo correcto.

Todo estoy supera mis posibilidades claramente.

Mucha gracias.