Блог

у меня есть слайдер вопросов, сделанный с помощью JS, с кнопкой «Далее», чтобы перейти к следующим вопросам, я хочу отключить эту кнопку на последнем слайде, который является слайдом отправки. Я попытался удалить идентификатор с последнего слайда, но он не отображается в ползунках. Любая помощь или советы по улучшению кода будут отличными

Вот мой код:

HTML: W

 <div class="slider">
        <form class="form" action="" method="post">
        <!-- fade css -->
        {% csrf_token %}
        
        {% for question in questions %}
        <div class="myslide fade">
            <div class="txt">
                
                <p>{{question.question}}</p>
                
                
                <input id="{{question.id}}" type='radio' name="{{question.id}}" value="{{question.category}}">
                <label for="{{question.id}}">Yes</label>
                <br> 
                <input id="{{question.id}}1" type='radio' name="{{question.id}}" value="no">
                <label for="{{question.id}}1">No</label>
                <br>
            </div>
            <img src="{{question.img.url}}" style="width: 100%; height: 100%;">
        </div>
        {% endfor %}
        <div class="myslide fade">
            <div class="txt">
                <p>You finished all questions</p>
                <input type="submit" class="btn" value="Submit">
            </div>
            <img src="{% static 'img/img4.jpg'%}" style="width: 100%; height: 100%;">
        </div>
        <a class="next" onclick="plusSlides(1)">Next</a>
        
    </form>
        
    </div>
 

JS:

 const myslide = document.querySelectorAll('.myslide'),
      dot = document.querySelectorAll('.dot');
let counter = 1;
slidefun(counter);

let timer = setInterval(autoSlide, 8000);

function plusSlides(n) {
    counter  = n;
    slidefun(counter);
    resetTimer();
}
function currentSlide(n) {
    counter = n;
    slidefun(counter);
    resetTimer();
}
function resetTimer() {
    clearInterval(timer);
    timer = setInterval(autoSlide, 8000);
}

function slidefun(n) {
    
    let i;
    for(i = 0;i<myslide.length;i  ){
        myslide[i].style.display = "none";
    }
    for(i = 0;i<dot.length;i  ) {
        dot[i].className = dot[i].className.replace(' active', '');
    }
    if(n > myslide.length){
       counter = 1;
       }
    if(n < 1){
       counter = myslide.length;
       }
    
    myslide[counter - 1].style.display = "block";
    dot[counter - 1].className  = " active";
}


 

Thanks in advance