2

mi duda es la siguiente:

Cómo podría pasar una variable que se está ejecutando en un addEventListener a otro, en la variable index estoy guardando un dato, este se encuentra en validarDivision.addEventListener y me gustaría pasarlo al segundo que lleva por nombre validarClient.addEventListener, pero quisiera saber de que forma lo podría realizar.

el código es el siguiente:

let validarDivision = document.querySelector('#selectDiv')
let validarClient = document.querySelector('#selectClient')

//addEventListener 1
validarDivision.addEventListener('change', (e) => {
    let index = validarDivision.selectedIndex; //variable que quiero pasar al otro addEventListener
    let valor = validarDivision.value;
    console.log('Division: ' + index + ' ' + valor);
})

//addEventListener 2
validarClient.addEventListener('change', (e) => {
    let index2 = validarClient.selectedIndex;
    let valor2 = validarClient.value;
    console.log('Cliente: ' + index2 + ' ' + valor2);

})

2
  • 1
    Declara la variable fuera del listener: let index; y luego dentro le asignas el valor, sin declaración: index = validarDivision.selectedIndex; Así, podrás usarla en cualquier ámbito.
    – A. Cedano
    el 9 nov. 2021 a las 22:09
  • Muchas gracias amigo me sirvió bastante tu respuesta!!! :) Saludos! el 9 nov. 2021 a las 22:20

1 respuesta 1

2

Puedes declarar la variable fuera del listener y luego dentro le asignas el valor, sin declaración. Así, podrás usarla en cualquier ámbito.

Por ejemplo:

let validarDivision = document.querySelector('#selectDiv')
let validarClient = document.querySelector('#selectClient')
let valor;

//addEventListener 1
validarDivision.addEventListener('change', (e) => {
  let index = validarDivision.selectedIndex; //variable que quiero pasar al otro addEventListener
  valor = validarDivision.value;
  console.log(`Division:  ${index} ${valor}`);
})

//addEventListener 2
validarClient.addEventListener('change', (e) => {
  let index2 = validarClient.selectedIndex;
  let valor2 = validarClient.value;
  console.log(`Cliente: ${index2} ${valor2} \nY el valor que tomó en el otro listener es: ${valor}`);

})
<select id="selectDiv">
  <option value="-1" disabled selected>--Seleccione--</option>
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
  <option value="value3">Value 3</option>
</select>

<select id="selectClient">
  <option value="-1" disabled selected>--Seleccione Cliente--</option>
  <option value="c1">Client 1</option>
  <option value="c2">Client 2</option>
  <option value="c3">Client 3</option>
</select>

O bien, dado que tienes una referencia de ambos elementos, puedes obtener el valor del elemento seleccionado del otro select usando esa referencia.

Por ejemplo:

let validarDivision = document.querySelector('#selectDiv')
let validarClient = document.querySelector('#selectClient')

//addEventListener 1
validarDivision.addEventListener('change', (e) => {
  let index = validarDivision.selectedIndex; //variable que quiero pasar al otro addEventListener
  let valor = validarDivision.value;
  console.log(`Division:  ${index} ${valor}`);
})

//addEventListener 2
validarClient.addEventListener('change', (e) => {
  let index2 = validarClient.selectedIndex;
  let valor2 = validarClient.value;
  /*Este es el valor del otro select*/
  let otherValue = validarDivision.options[validarDivision.selectedIndex].value;

  console.log(`Cliente: ${index2} ${valor2} \nY el valor del otro select es: ${otherValue}`);

})
<select id="selectDiv">
  <option value="-1" disabled selected>--Seleccione--</option>
  <option value="value1">Value 1</option>
  <option value="value2">Value 2</option>
  <option value="value3">Value 3</option>
</select>

<select id="selectClient">
  <option value="-1" disabled selected>--Seleccione Cliente--</option>
  <option value="c1">Client 1</option>
  <option value="c2">Client 2</option>
  <option value="c3">Client 3</option>
</select>

1
  • Muchas gracias por el aporte así me queda mucho más claro! :D el 9 nov. 2021 a las 22:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.