Как сменить картинку после нажатия на кнопку?

Здравствуйте, имеется скрипт, который автоматически (после нажатия на кнопку) выводит поочередный текст (или картинку). А как допилить этот скрипт, что бы смена текста (или картинки) происходила только после нажатия на кнопку?

<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<span id='block'></span>

<input type='submit' id='but' value='назад' class='site_btn' name='mybutton'>
<input type='submit' id='but' value='вперед' class='site_btn' name='mybutton'>

<script type="text/javascript">
const textArr = [ 
'текст1', 
'текст2', 
'текст3', 
'текст4'
]

const divEl = document.querySelector('#block')
const changeDelay = 4000

//===================================================================//
document.querySelector('#but').addEventListener('click', () => { 
//===================================================================//
 	textArr.map((txt, idx) => {
  	setTimeout(() => {
    		divEl.className = 'fade-effect -show'
				divEl.innerHTML = txt
        
				setTimeout(() => {
        	divEl.className = ''
        }, !idx ? fadeOutDelay : idx * fadeOutDelay)
        
    }, idx * changeDelay)
  })
})
</script>