Javascript: как динамически изменять src изображения с событием в классе кнопок?

У меня проблемы с написанием функции, которая динамически меняет изображение. У меня есть три кнопки: маленькая, средняя и большая.

Когда я нажимаю кнопку, я хочу, чтобы изображение изменилось до желаемого размера. HTML кнопок нельзя изменить, поэтому я хочу написать функцию JS, которая сделает это возможным.

Ниже вы видите мой сценарий:

<img src = "" style = "width:100%; height:400px;" name = "formula" id = "formula">

<script type='text/javascript'>
$(document).ready(function(){
    changeClass();

    document.getElementsByClassName("button-variable-item")[0].addEventListener( 'click', changeClass);
    document.getElementsByClassName("button-variable-item")[1].addEventListener( 'click', changeClass);
    document.getElementsByClassName("button-variable-item")[2].addEventListener( 'click', changeClass);

});

function changeClass(){
    console.info('binnen');

    var image_name;
    var L = document.getElementsByClassName("button-variable-item-l");
    var S = document.getElementsByClassName("button-variable-item-s");
    var M = document.getElementsByClassName("button-variable-item-m");

    if ( S[0].classList.contains('selected') ){
        image_name = "https://www.studio-31.nl/wp-content/uploads/2018/03/WhatsApp-Image-2018-03-16-at-11.52.31.jpeg";
        console.info('S');
    }else if ( L[0].classList.contains('selected') ){
        image_name = "https://www.studio-31.nl/wp-content/uploads/2018/03/WhatsApp-Image-2018-03-16-at-11.52.19.jpeg";
        console.info('L');
    }else if ( M[0].classList.contains('selected') ){
        image_name = "https://www.studio-31.nl/wp-content/uploads/2018/03/WhatsApp-Image-2018-03-16-at-11.46.25.jpeg";
        console.info('M');
    }

     $('#formula').attr('src', image_name);
}

</script>

А вот HTML-код кнопок:

<ul class = "list-inline variable-items-wrapper button-variable-wrapper " data-attribute_name = "attribute_pa_size">
<li data-wvstooltip = "L" class = "variable-item button-variable-item button-variable-item-l selected" title = "L" data-value = "l">
    <span>L</span>
</li>
<li data-wvstooltip = "M" class = "variable-item button-variable-item button-variable-item-m" title = "M" data-value = "m">
    <span>M</span>
</li>
<li data-wvstooltip = "S" class = "variable-item button-variable-item button-variable-item-s" title = "S" data-value = "s">
<span>S</span>
</li>
</ul>

Когда я нажимаю на кнопку, происходит что-то, но не ожидаемое действие.

Пожалуйста, помогите мне!