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
})