How to use two scripts in a single select (onechange)

Question

I have a question: I have two scripts, one to change the image and the other of the respective select, and the other to make the calculation between them.

I would like to use both for the same select, the problem is that one is used with:

onchange="processa(this.options[this.selectedIndex].value,'');

and the other with:

onchange="processa();

In this case what can I do to use these two scripts, in a single select simultaneously?

Script 1

<script type="text/javascript">
/* URL of folder with images  */
var baseURL_OF_images = "file:///C|/Users/Vilma/Desktop/Developer/EloBurn/elojob/";
/* array of default image files */
var images =
      [ "bronze.png", 
        "prata.png",
        "gold.png", 
        "platina.png",
        "diamante.png" 
        ]

        function processa(imgNum,target){
        var z = parseInt(imgNum);
        var x = z - 1;
        var src = baseURL_OF_images + ( ( x < 0 ) ? "bronze.png": images[x] );

  document.getElementById("AvatarImage"+target).src = src;
  return true;
}
</script>

Script 2

<script>
function processa(){
    //recolhe a informação dos select's
    var tipo_e = $("#tipo_esq option:selected").val();
    var div_e = $("#div_esq option:selected").val();
    var tipo_d = $("#tipo_dir option:selected").val();
    var div_d = $("#div_dir option:selected").val();

    //definir as arrays com as combinacoes e os respectivos valores
    var combinacoes = ['11','12','13','14','15','21','22','23','24','25','31','32','33','34','35','41','42','43','44','45','51','52','53','54','55'];
    var valor = ["15","15","15","15","15","20","20","20","20","20","25","25","25","25","25","45","45","45","45","45","120","120","120","120","120"];

    //definir as chaves
    var esquerda = tipo_e+div_e;
    var direita = tipo_d+div_d;

    //encontrar as chaves na array
    var pum = combinacoes.indexOf(esquerda);
    var pdois = combinacoes.indexOf(direita);

    var soma = parseInt("0");

    //verificacao dos resultados e mostragem dos mesmos se estiver tudo bem
    if(pum >= pdois){
    $("#erro").text("uma frase qualquer de erro");
    $("#valor").text("");
    }else{
    for (var i in valor) { 
        if(i >= pum && i < pdois){
        var vvv = parseInt(valor[i]);
            soma = soma + vvv; 
            var fim = "R$ "+soma+",00";
            $("#valor").text(fim);
        }
    } 
    }
}
</script>

My code:

<img id="AvatarImage" name="AvatarImage" src="file:///C|/Users/Vilma/Desktop/Developer/EloBurn/elojob/bronze.png" style="widht:200px;height:200px;" />
<select id="tipo_esq" onchange="processa();">
    <option value="1" selected>Bronze</option>
    <option value="2">Prata</option>
    <option value="3">Ouro</option>
    <option value="4">Platina</option>
    <option value="5">Diamante</option>
</select>
<select id="div_esq" onchange="processa();">
    <option value="1" selected>Division V</option>
    <option value="2">Division IV</option>
    <option value="3">Division III</option>
    <option value="4">Division II</option>
    <option value="5">Division I</option>
</select>
<img id="AvatarImage2" name="#AvatarImage2" src="file:///C|/Users/Vilma/Desktop/Developer/EloBurn/elojob/bronze.png" style="widht:200px;height:200px;" />
<select id="tipo_dir" onchange="processa();">
    <option value="1" selected>Bronze</option>
    <option value="2">Prata</option>
    <option value="3">Ouro</option>
    <option value="4">Platinum</option>
    <option value="5">Diamante</option>
</select>
<select id="div_dir" onchange="processa();">
    <option value="1" selected>Division V</option>
    <option value="2">Division IV</option>
    <option value="3">Division III</option>
    <option value="4">Division II</option>
    <option value="5">Division I</option>
</select>

<div class="col-md-6" id="valor"></div>
<div class="col-md-6" id="erro"></div>

Sincerely yours

Answer 1

Usa .eventHandler in Javascript. So you run a function each time a select on the change page (the same unique code is for all) and within the function processa in the example below you know that this is the select and this.value is the selected value of select.

var selects = document.querySelectorAll('select');
for (var i = 0; i < selects.length; i++){
    selects[i].addEventListener('change', processa);
}

function processa(e){
    fn1(this.value, '');
    fn2();
}