For a special writing and/or worldbuilding project I have, I created a special program.In the story, different factions have different ideas on what should be considered the first year of their calendar system. For the sake of simplicity, the years are equally long, but the first year declarations are different.This HTML-Javascript program uses a dynamically selected pair of lists where you can select conversion calendars. You then enter a year, hit a button, and the conversion happens.The numbers are already tested by me and aside of one year of difference, are perfect.What I ask is to give some insights of readibility, cleanness, and, if possible and conventient, any optimization.HTML:<!DOCTYPE html><html>    <head>        <script         <script src='/files/terminus-nation/convertdate.js'></script>    </head>    <body>        <!-- A SIMPLE DATE CALCULATOR -->        <div class=heading>            <div class=datecalc>                <h1> TN Date Calculator </h1>                <h2>What a given year in a calendar system corresponds to, in another one?</h2>                <input type=number id=in_d style=width:100px;> in                <select id=in_c></select> to                <select id=ou_c></select>                <button id=action onClick=convertDate_onClick()>Convert</button>                <p id=result></p>            </div>        </div>    </body>    <script src='/files/terminus-nation/date-calc/main_js.js'></script></html>convertdate.js, the conversion function, separated for flexibility:var calendars = [    [BY, Beacon Year],    [KW, Kvahk'er'Weplec],    [RD, Republic Date],    [RY, Resistance Year],    [IC, Initial Contact],    [CD, CyberDomini],    [UD, Union Day]];//the corefunction convertDate(in_cal, in_date, out_cal){    in_date = parseInt(in_date);    var orig = in_date;    //each number shows, when a certain calender started compared to the others    //e.g. 563159 in BY equals to 1 in KW and 100325 in KW equals to 1 in RD    var DateOrder =  [563159, 100325, 3426, 1406, 2036, 1042];    var in_id = -1;    var ou_id = -1;    function MinorConvert(string){        var output = -2;        for(i=0;i<calendars.length;i++){ if(string==calendar[i][0]){ output = i-1 }}        return output;    }    in_id = MinorConvert(in_cal);    ou_id = MinorConvert(out_cal);    //-2 serves as an error code    //it was implemented, when calendar wasn't added yet, but I'm afraid to eliminate    if (in_id > -2 && ou_id > -2){        //if the calendars different, it iterates through the calendar array        //if the calendars are identical, it doesn't change the input        if (in_id != ou_id){            if(in_id<ou_id)      {  for(s=in_id;s<ou_id;s++){ in_date-= DateOrder[s+1]; }                                        }else{  for(s=ou_id;s<in_id;s++){ in_date+= DateOrder[s+1]; }            };        };    }else{ window.alert(in_cal +  to  + out_cal +  doesn't seem to be a valid conversation.) };    //input is the returning value, either changed or unchanged (see comments at the condition above)    return in_date;}main_js.js, the only file affecting the HTML directly://initializationfillList(in_c);fillList(ou_c);//for select-list autocompletefunction fillList(id){    //first already added, now add the rest    for(i=0;i<calendars.length;i++){        var option = document.createElement(option);    option.value = calendars[i][0];    option.text = calendars[i][1];    document.getElementById(id).appendChild(option);    }}//called by button clickfunction convertDate_onClick(){    var in_c =  document.getElementById(in_c).value;    var in_d = document.getElementById(in_d).value;    var ou_c = document.getElementById(ou_c).value;    document.getElementById(result).innerHTML = in_d +  in  + in_c +  equals to  + convertDate(in_c, in_d, ou_c) +  in  + ou_c;}I omitted CSS dependency as apparently the file works without that.
A humble converter between calendars
javascript;html