Bollate

HTML

[ANSWERED] javascript – Can’t swap div elements using .innerHTML properly

By

Nov 19, 2022 , ,

Solution 1 :

i have updated your code . you can use below code it will work for you

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

Problem :

I’m new to html / css / javascript and was making a website. I have divs that I call video panels because on each panel there’s a video and a caption. I am trying to write a script that when called grabs the contents of the panels and places the contents of the next panel (on each click) where the contents of the 0th panel would be (all are hidden but the 0th panel in the array, trying to make each next panel appear on click).

This is my first question, sorry if it’s worded weird and thanks for the help!

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>

Comments

Comment posted by KcH

could you add all the code , and update the error’s in the console if any

Comment posted by KcH

if there are many more panels – then with this :

Comment posted by Taylor Rahul

yeah we can do this too

Comment posted by alanb43

Thank you, going to try it right now Taylor.

Comment posted by alanb43

It doesn’t work properly, when I click my button it seems to move a line break that’s in the code

Comment posted by Taylor Rahul

but its working in example .. can you show us where exactly the issue is in your code . maybe a screenshot

By

Related Post

HTML

[ANSWERED] python – Extract text from a class in HTML using CSS language

Nov 20, 2022
HTML

[ANSWERED] How do you add a background image in the margins and top of the page behind the body? (Html, Css)

Nov 20, 2022
HTML

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022