Question: I am trying to perform two processes using bean, my problem is that I can not find the way these processes are performed continuously. The first process is to send an object and the second process is the response of the object.

```
@Component
public class Proceso implements InitializingBean{
    private static final String XML_SCHEMA_LOCATION = "/proceso/model/schema/proceso.xsd";
    private Envio envio;
    private Respuesta respuesta;

    public void Proceso_envio(Proceso proceso, OutputStream outputstream) throws JAXBException{
      envio.marshal(proceso, outputstream);}

    public void Proceso_respuesta(InputStream inputstream) throws JAXBException, FileNotFoundException{
    Object obj = unmarshaller.unmarshal(inputStream);
    return (Proceso_respuesta) obj;}

    @Override
    public void afterPropertiesSet() throws Exception{
        SchemaFactory schemaFactory = SchemaFactory.newInstance(XMLConstants.W3C_XML_SCHEMA_NS_URI);
        Schema schema = schemaFactory.newSchema(getClass().getResource(XML_SCHEMA_LOCATION));
        JAXBContext jc = JAXBContext.newInstance(Envio.class, Respuesta.class);

        this.marshaller = jc.createMarshaller();
        this.marshaller.setProperty(Marshaller.JAXB_FORMATTED_OUTPUT, true);
        this.marshaller.setProperty(Marshaller.JAXB_ENCODING, StandardCharsets.UTF_8.displayName());
        this.marshaller.setSchema(schema);

        this.unmarshaller = jc.createUnmarshaller();

        this.unmarshaller.setSchema(schema);
     }

```

I imagine that with the code my question becomes clearer.

Answer: 
**HTML**

```
<select name="study-phase" onchange="myFunction()" id="study-phase" class="sp-input">
    <option value=""></option>
    <option id="pri" value="pri">Primary</option>
    <option id="pre" value="pre">Prep</option>
    <option id="sec" value="sec">Secondary</option>
</select>
<select name="study-year" id="study-year" class="sp-input">
    <option value=""></option>
    <option id="a" value="aa">Grade 1</option>
    <option id="b" value="">Grade 2</option>
    <option id="c" value="">Grade 3</option>
    <option id="d" value="">Grade 4</option>
    <option id="e" value="">Grade 5</option>
    <option id="f" value="">Grade 6</option>
    <option id="g" value="">Grade 7</option>
    <option id="h" value="">Grade 8</option>
    <option id="i" value="">Grade 9</option>
    <option id="j" value="">Grade 10</option>                       
</select>
<style type="text/css">
  #a,
  #b,
  #c,
  #d,
  #f,
  #g,
  #h,
  #j,
  #k,
  #e,
  #i {
    display: none;
  }
</style>

```

**JS:**

```
function myFunction(){
     console.log("myFunction gets called");
    if (document.getElementById("study-phase").value == "pri") {
        document.getElementById("a").style.display = "block";
    }}

```

Just declare your function like this.
And add a console.log to make sure that function is getting called "onchange" or not, which is after this change.
You need to define the function before calling it,

For example, in the first select (example 1) im calling a function that isn't defined yet and nothing happens (see console for error)

in the second select (example 2) i define it first then call it.

This makes for a messy html layout with random scripts in it, so instead, you can use jquery to listen for the event (example 3).

```
$('.myselect').change(function(){})

```

Examples: <https://jsfiddle.net/hbmrktbj/>