Изменить ресурс изображения внутри Div

Question

Я пытаюсь изменить Image Resource Inside of Div.

Я пытаюсь использовать приведенные ниже коды, но не работаю с ошибкой:

Uncaught TypeError: buttonShape[i].getElementById is not a function

<div class='about-nav'>
   <div class='btn-shape'>
      <img src='model/png/1.png' id='btn-icon' onClick='callSlide(1)'>
   </div>
   <div class='btn-shape'>
      <img src='model/png/1.png' id='btn-icon' onClick='callSlide(2)'>
   </div>
</div>

function callSlide(n)
{

    var slideIndex=n;

    let btnShapeGray = ['icon-vision-gr.png', 'icon-genre-gr.png'];

    let btnShapeColor = ['icon-vision-violet.png', 'icon-genre-vi.png'];

    let buttonShape = document.getElementsByClassName('btn-shape');

    for(let i = 0; i < buttonShape.length; i++)
    {
        let target = buttonShape[i].getElementById('btn-icon');
    //  target.src = "model/png/Nav/Gray"+btnShapeGray[i];
    }

    let target = buttonShape[slideIndex-1].getElementById('btn-icon');
    target.src = "model/png/Nav/Color"+btnShapeColor[slideIndex-1];
}

Как я могу это изменить ??

Спасибо.