“上一步”和“下一步”按钮循环浏览div内容，仅使用javascript而不使用jquery

我希望我的“上一张”和“下一张”按钮在单击“下一张”时隐藏当前卡并显示下一张卡，在单击“上一张”时隐藏当前卡并显示上一张卡。显而易见的东西。我看了很多类似的问题，但答案都在jquery中，到目前为止，我对它一无所知。我只想使用javascript、css和html来实现这一点

HTML:

<div class="cardContainer">
    <div class="questionCard active" id="q1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna. 
    </div>
    <div class="questionCard" id="q2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna. 
    </div>
    <div class="questionCard" id="q3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin at varius sem. Morbi congue sit amet elit eu suscipit. Aliquam tristique leo at lacinia dapibus. Aliquam faucibus sapien sit amet odio aliquam, sed vestibulum eros porttitor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dictum lobortis diam, ac pellentesque arcu sagittis eu. Mauris sit amet diam cursus, aliquam justo sed, ornare tellus. In id nibh lacinia, viverra felis ut, venenatis sem. Donec vel tortor dignissim, convallis arcu nec, bibendum urna. 
    </div>
    <div class="navCard">
        <a href="#" id="prev" onclick="previous()"><img src="img/back.png" value="prev"></a>
        <a href="#" id="nxt" onclick="next()"><img src="img/forward.png" value="nxt"></a>
        <a href="#" ><img src="img/Facebook.png" value="fb"></a>
        <a href="#" ><img src="img/Twitter.png" value="tweet"></a>
        <a href="#" ><img src="img/WhatsApp.png" value="whatsapp"></a>
    </div>
</div><!--end of card container-->

JS:

---

好的，现在我了解到您在处理错误方面有困难，让我们来解决这个问题。要处理事情而不是在末端出现错误，你只需要注意这些情况。下面是一个非常简单的例子

小提琴：

HTML：（我将ID改为从零开始，因为它使基于零的ID更容易）

---

如果评论有意义，请告诉我，或者随时询问更多信息。

好的，现在我知道您在处理错误方面有困难，让我们继续努力。要处理事情而不是在末端出现错误，你只需要注意这些情况。下面是一个非常简单的例子

小提琴：

HTML：（我将ID改为从零开始，因为它使基于零的ID更容易）

---

如果评论有意义，请告诉我，或者随时询问更多信息。

有什么问题吗？除了超出

qlist

长度时没有错误处理外，代码工作正常。我需要错误处理方面的帮助问题是什么？代码运行良好，除了超出

qlist

长度时没有错误处理。我需要错误处理方面的帮助非常感谢。这个helpsNo问题，实际上只是更新了答案，因为代码有问题。现在应该很好了。我到电脑前会运行它。但这似乎是对的，也有道理。非常感谢。这个helpsNo问题，实际上只是更新了答案，因为代码有问题。现在应该很好了。我到电脑前会运行它。但这似乎是正确的，也有道理。

.cardContainer {
    position: relative;
    top: 400px;
    background-color: #333;
    height: 100%;
    box-shadow: -1px -1px 7px black;
}
.active {
    display: block;
}


.questionCard {
    min-width: 50%;
    max-width: 60%;
    margin: 0 auto;
    margin-top: 20px;
    top: -300px;
    padding: 20px;
    background-color: #1b6bb9;
    color: white;
    border-radius: 2px;
    position: inherit;
    border-color: #1167bc;
    box-shadow: 1px 1px 7px black;
    border: rgba(128, 128, 128, 0.35);
    z-index: 1;
    display: none;
}
.navCard {
    max-width: 400px;
    min-width: 60px;
    margin: 0 auto;
    border-color: #1b6bb9;
    z-index: 1;
    padding: 20px;
    background-color: white;
    border-radius: 2px;
    box-shadow: 1px 1px 7px;
    border: rgba(128, 128, 128, 0.35);
    position: inherit;
    top: -270px;
    background-color: #1b6bb9;
    align-content: center;
}

var qlist = document.getElementsByClassName("questionCard");
var i=1;
function previous () {
    qlist[i].style.display = 'none';
    qlist[i-1].style.display = 'block';
    i--
}

function  next () {
    qlist[i].style.display = 'block';
    qlist[i-1].style.display = 'none';
    i++
}

<div class="cardContainer">
    <div class="questionCard active" id="q0">
        q0
    </div>
    <div class="questionCard" id="q1">
        q1
    </div>
    <div class="questionCard" id="q2">
        q2
    </div>
    <div class="questionCard" id="q3">
        q3
    </div>
    <div class="navCard">
        <a href="#" id="prev" onclick="previous()">prev</a>
        <a href="#" id="nxt" onclick="next()">next</a>
    </div>
</div>

// Find all question cards
var qlist = document.getElementsByClassName("questionCard");
// Track current index
var i = 0;
// Track length of questions
var length = list.length;

function previous () {
    // If i is 0 we are back at start so don't do anything
    if (i == 0) {
        alert('done');
        return;
    }
    // Since we add at end of next we subtract at start of pre
    i--
    // Hide current
    qlist[i].style.display = 'none';
    // If i is 0 don't display previous since it doesn't exist
    if (i != 0) {
        qlist[i - 1].style.display = 'block';
    }
}

function  next () {
    // If i is length we are at end so don't do anything
    if (i == length) {
        alert('done');
        return;
    }
    // Show current
    qlist[i].style.display = 'block';
    // if i is 0 don't try to hide previous since it doesn't exist
    if (i != 0) {
        qlist[i-1].style.display = 'none';
    }
    // Add one to i
    i++
}