El cierre con métodos funciona hasta que se llama desde un evento de clic

Estoy expandiendo este código de trabajo para suministrar los datos a través de un menú de selección y ejecutarlo a través de un evento de clic. Sin embargo, lo que se devolvía como valores de texto, ahora devuelve cosas extrañas como:

{
 /**id:1**/
 "isTrusted": true,
 "initMouseEvent": function initMouseEvent() {
 [native code]
 },
...

El cambio con respecto al código de trabajo mencionado anteriormente es que la llamada a los métodos de cierre ahora se encuentra dentro de un detector de eventos de clic. ¿Alguna idea de lo que está pasando aquí?

// 
const addButton = document.getElementById('addYear');
const deleteButton = document.getElementById('deleteYear');
const yearSelect = document.getElementById('yearSelect');
let selectedYear = yearSelect.options[yearSelect.selectedIndex].value;
const output = document.getElementById('output');
  
// 
  
let newHandleYears = handleYears();
// 
addButton.addEventListener("click", function(selectedYear) {
 newHandleYears.addYear(selectedYear);
 console.log(selectedYear);
 output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
 output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
});
deleteButton.addEventListener("click", function() {
 output.innerHTML += `<p>Delete item "${newHandleYears.years[newHandleYears.years.length - 1]}" from "years" array.</p>`;
 newHandleYears.deleteYear(2002); // WIP
 output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
 output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
});
  
// 
function handleYears() {
 let years = [];
 let addYear = (newYear) => {
 years.push(newYear);
 }
 let deleteYear = (yearToDelete) => {
 years = years.filter(item => item!== yearToDelete)
 }
 let calculateMaxYear = () => {
 return Math.max(...years);
 }
 let getYears = () => {
 return years
 }
 return {
 getYears: getYears,
 addYear: addYear,
 deleteYear: deleteYear,
 calculateMaxYear: calculateMaxYear
 }
}

body {padding: 0.25rem 0.5rem;}
#output {
 padding: 0.5rem 1rem;
 border: solid 1px #ccc;
}

<form>
 <p>
 <label for="yearSelect">Year</label>
 <select id="yearSelect">
 <option value="">Select one...</option>
 <option value="1948">1948</option>
 <option value="1949">1949</option>
 <option value="1950">1950</option>
 <option value="1951">1951</option>
 <option value="1952">1952</option>
 <option value="1953">1953</option>
 <option value="1954">1954</option>
 <option value="1955">1955</option>
 <option value="1956">1956</option>
 <option value="1957">1957</option>
 <option value="1958">1958</option>
 <option value="1959">1959</option>
 <option value="1960">1960</option>
 <option value="1961">1961</option>
 <option value="1962">1962</option>
 <option value="1963">1963</option>
 <option value="1964">1964</option>
 <option value="1965">1965</option>
 <option value="1966">1966</option>
 <option value="1967">1967</option>
 <option value="1968">1968</option>
 <option value="1969">1969</option>
 <option value="1970">1970</option>
 <option value="1971">1971</option>
 <option value="1972">1972</option>
 <option value="1973">1973</option>
 <option value="1974">1974</option>
 <option value="1975">1975</option>
 <option value="1976">1976</option>
 <option value="1977">1977</option>
 <option value="1978">1978</option>
 <option value="1979">1979</option>
 <option value="1980">1980</option>
 <option value="1981">1981</option>
 <option value="1982">1982</option>
 <option value="1983">1983</option>
 <option value="1984">1984</option>
 <option value="1985">1985</option>
 <option value="1986">1986</option>
 <option value="1987">1987</option>
 <option value="1988">1988</option>
 <option value="1989">1989</option>
 <option value="1990">1990</option>
 <option value="1991">1991</option>
 <option value="1992">1992</option>
 <option value="1993">1993</option>
 <option value="1994">1994</option>
 <option value="1995">1995</option>
 <option value="1996">1996</option>
 <option value="1997">1997</option>
 <option value="1998">1998</option>
 <option value="1999">1999</option>
 <option value="2000">2000</option>
 <option value="2001">2001</option>
 <option value="2002">2002</option>
 <option value="2003">2003</option>
 <option value="2004">2004</option>
 <option value="2005">2005</option>
 <option value="2006">2006</option>
 <option value="2007">2007</option>
 <option value="2008">2008</option>
 <option value="2009">2009</option>
 <option value="2010">2010</option>
 <option value="2011">2011</option>
 <option value="2012">2012</option>
 <option value="2013">2013</option>
 <option value="2014">2014</option>
 <option value="2015">2015</option>
 <option value="2016">2016</option>
 <option value="2017">2017</option>
 <option value="2018">2018</option>
 <option value="2019">2019</option>
 <option value="2020">2020</option>
 <option value="2021">2021</option>
 <option value="2022">2022</option>
 </select>
 </p>
 <p>
 <input type="button" id="addYear" value="Add">
 </p>
 <p>
 <input type="button" id="deleteYear" value="Delete">
 </p>
</form>
<div id="output"></div>

Solución del problema

SelectedYeardebe ser una variable local dentro de la función de escucha, no un parámetro de la función. El parámetro de la función es el evento, sombrea la variable global. Y la variable global solo tiene el valor del menú desplegable cuando la página se cargó por primera vez, no el valor después de hacer clic en el botón.

// 
const addButton = document.getElementById('addYear');
const deleteButton = document.getElementById('deleteYear');
const yearSelect = document.getElementById('yearSelect');
const output = document.getElementById('output');
// 
let newHandleYears = handleYears();
// 
addButton.addEventListener("click", function() {
 let selectedYear = yearSelect.value;
 newHandleYears.addYear(selectedYear);
 console.log(selectedYear);
 output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
 output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
});
deleteButton.addEventListener("click", function() {
 output.innerHTML += `<p>Delete item "${newHandleYears.years[newHandleYears.years.length - 1]}" from "years" array.</p>`;
 newHandleYears.deleteYear(2002); // WIP
 output.innerHTML += `<p>Years: ${newHandleYears.getYears()}</p>`;
 output.innerHTML += `<p>Maximum year: ${newHandleYears.calculateMaxYear()}</p>`;
});
// 
function handleYears() {
 let years = [];
 let addYear = (newYear) => {
 years.push(newYear);
 }
 let deleteYear = (yearToDelete) => {
 years = years.filter(item => item!== yearToDelete)
 }
 let calculateMaxYear = () => {
 return Math.max(...years);
 }
 let getYears = () => {
 return years
 }
 return {
 getYears: getYears,
 addYear: addYear,
 deleteYear: deleteYear,
 calculateMaxYear: calculateMaxYear
 }
}

body {
 padding: 0.25rem 0.5rem;
}
#output {
 padding: 0.5rem 1rem;
 border: solid 1px #ccc;
}

<form>
 <p>
 <label for="yearSelect">Year</label>
 <select id="yearSelect">
 <option value="">Select one...</option>
 <option value="1948">1948</option>
 <option value="1949">1949</option>
 <option value="1950">1950</option>
 <option value="1951">1951</option>
 <option value="1952">1952</option>
 <option value="1953">1953</option>
 <option value="1954">1954</option>
 <option value="1955">1955</option>
 <option value="1956">1956</option>
 <option value="1957">1957</option>
 <option value="1958">1958</option>
 <option value="1959">1959</option>
 <option value="1960">1960</option>
 <option value="1961">1961</option>
 <option value="1962">1962</option>
 <option value="1963">1963</option>
 <option value="1964">1964</option>
 <option value="1965">1965</option>
 <option value="1966">1966</option>
 <option value="1967">1967</option>
 <option value="1968">1968</option>
 <option value="1969">1969</option>
 <option value="1970">1970</option>
 <option value="1971">1971</option>
 <option value="1972">1972</option>
 <option value="1973">1973</option>
 <option value="1974">1974</option>
 <option value="1975">1975</option>
 <option value="1976">1976</option>
 <option value="1977">1977</option>
 <option value="1978">1978</option>
 <option value="1979">1979</option>
 <option value="1980">1980</option>
 <option value="1981">1981</option>
 <option value="1982">1982</option>
 <option value="1983">1983</option>
 <option value="1984">1984</option>
 <option value="1985">1985</option>
 <option value="1986">1986</option>
 <option value="1987">1987</option>
 <option value="1988">1988</option>
 <option value="1989">1989</option>
 <option value="1990">1990</option>
 <option value="1991">1991</option>
 <option value="1992">1992</option>
 <option value="1993">1993</option>
 <option value="1994">1994</option>
 <option value="1995">1995</option>
 <option value="1996">1996</option>
 <option value="1997">1997</option>
 <option value="1998">1998</option>
 <option value="1999">1999</option>
 <option value="2000">2000</option>
 <option value="2001">2001</option>
 <option value="2002">2002</option>
 <option value="2003">2003</option>
 <option value="2004">2004</option>
 <option value="2005">2005</option>
 <option value="2006">2006</option>
 <option value="2007">2007</option>
 <option value="2008">2008</option>
 <option value="2009">2009</option>
 <option value="2010">2010</option>
 <option value="2011">2011</option>
 <option value="2012">2012</option>
 <option value="2013">2013</option>
 <option value="2014">2014</option>
 <option value="2015">2015</option>
 <option value="2016">2016</option>
 <option value="2017">2017</option>
 <option value="2018">2018</option>
 <option value="2019">2019</option>
 <option value="2020">2020</option>
 <option value="2021">2021</option>
 <option value="2022">2022</option>
 </select>
 </p>
 <p>
 <input type="button" id="addYear" value="Add">
 </p>
 <p>
 <input type="button" id="deleteYear" value="Delete">
 </p>
</form>
<div id="output"></div>