why isn’t the JavaScript working on the HTML (bootstrap arrow button)? [duplicate]

I used left and right arrow from bootstrap to my food website. But when I applied javascript leftscroll to the arrow its not working, please help.

HTML code:

 <div class="offers">
        <h5>Coupons & Offers</h5>

        <div class="arrows">

            <i class="bi bi-arrow-left-circle-fill" id="leftscroll"></i>
            <i class="bi bi-arrow-right-circle-fill" id="rightscroll"></i>

        </div>

        <div class="couponsimg">
            <img src="/img/coupon1.png" alt="">
            <img src="img/coupon2.png" alt="">
            <img src="/img/coupon3.png" alt="">
            <img src="/img/coupon4.png" alt="">
            <img src="/img/coupon5.png" alt="">

        </div>
    </div>

JavaScript code:

let rightArrow = document.getElementById('rightscroll')
let couponsimg = document.getElementsByClassName('couponsimg')
let leftArrow = document.getElementById('leftscroll')

rightArrow.addEventListener('click',()=>{
    couponsimg.scrollLeft+=300
})

leftArrow.addEventListener('click',()=>{
    couponsimg.scrollLeft-=300
})