无法使用 .innerHTML 正确交换 div 元素

Question

我是html/css/javascript的新手，正在制作一个网站。我把div称为视频面板，因为每个面板上都有一个视频和一个标题。我正在尝试编写一个脚本，当被调用时，它会获取面板的内容，并将下一个面板的内容(每次单击时(放置在第0个面板的位置(除了数组中的第0个之外，所有面板都被隐藏，试图使每个下一个板块在单击时出现(。

这是我的第一个问题，如果措辞怪异，很抱歉，谢谢你的帮助！

var counter = 0;
function nextSlide() {
var panel0 = document.getElementById("panel0").innerHTML;
panel1 = document.getElementById("panel1").innerHTML;
panel2 = document.getElementById("panel2").innerHTML;
panel3 = document.getElementById("panel3").innerHTML;
panel4 = document.getElementById("panel4").innerHTML;
var panels_contents = [panel0, panel1, panel2, panel3, panel4];
if (counter < 4) {
var switcher = panels_contents[counter + 1];
original = panels_contents[0];
panels_contents[0] = switcher;
panels_contents[counter + 1] = original;
counter++;
} else {
counter = 0;
}
}

#panel1 { display: none; } 
#panel2 { display: none; } 
#panel3 { display: none; } 
#panel4 { display: none; }

<div class="video-panel" id="panel0">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA        
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay;                clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>

<button onclick="nextSlide();">Press me</button>

Answer 1

我已经更新了您的代码。你可以使用下面的代码，它将为你工作

var counter = 0;
function nextSlide() {
var nextSlide = counter + 1 ;
if (nextSlide <= 4) {
document.getElementById('panel'+counter).style.display = 'none';
document.getElementById('panel'+nextSlide).style.display = 'block';
counter++;
} else {
counter = 0;
document.getElementById('panel4').style.display = 'none';
document.getElementById('panel0').style.display = 'block';
}
}

#panel1 { display: none; } 
#panel2 { display: none; } 
#panel3 { display: none; } 
#panel4 { display: none; }

<div class="video-panel" id="panel0">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA        
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay;                clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 0</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel1">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA        
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay;                clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 1</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel2">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA        
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay;                clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 2</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel3">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA        
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay;                clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 3</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="video-panel" id="panel4">
<div class="video">
<iframe height="255px" width="450px" src="https://www.youtube.com/embed/ENpPHGj3GbA        
rel=0&autoplay=1&loop=1&controls=1&mute=1" frameborder="0" allow="accelerometer; autoplay;                clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="captions">
<p class="caption-head">Python Discord Bot 4</p>
<p class="caption">Lorem ipsum dolor sit amet</p>
</div>
</div>
<button onclick="nextSlide();">Press me</button>

function prevSlide() {
var nextSlide = counter - 1 ;
if (nextSlide >= 0) {
console.log('counter',counter);
console.log('nextSlide',nextSlide);
document.getElementById('panel'+counter).style.display = 'none';
document.getElementById('panel'+nextSlide).style.display = 'block';
counter--;
} else {
counter = 4;
document.getElementById('panel4').style.display = 'block';
document.getElementById('panel0').style.display = 'none';
}
}