javascript - 带有下一个按钮的 Django & Js 问题滑块出现在最后一个问题上

Question

我有一个用 JS 制作的问题滑块，带有一个下一步按钮可以转到下一个问题，我想禁用最后一张幻灯片中的那个按钮，即提交幻灯片。我试图从最后一张幻灯片中删除 id，但它不会出现在滑块中，任何改进代码的帮助或建议都会很棒

这是我的代码：

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";
}

提前致谢

标签： javascriptdjango