CODEWITHSUNDEEP
javascriptjqueryhtmljquery-selectors
HELP
HELP

Reputation: 117

Select particular section on my page not include all section using javascript?

Here, I am using javascript for my carousel slider. In which I did all thing I face only one problem that is when I click on my next button it select all my section on my page but I want only select my section inside my div.

Here is my code :

 var divMain = document.getElementById("slide");
    console.log(divMain)

    var align = divMain.getAttribute("type");
    console.log(align)

    divMain.insertAdjacentHTML("afterbegin",' <progress id="progressbar" value="0" max="100"></progress>');
    if(align == "slideshow") {
        var timeline = document.getElementById('slide');
       $("#progressbar").css("display","none");
        timeline.insertAdjacentHTML("afterbegin",'<a class="left  color_arrow carousel-control" href="#myCarousel" onclick = "plusDivs(-1)" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous</span></a>');

        timeline.insertAdjacentHTML('afterbegin',' <a class="right color_arrow  carousel-control" href="#myCarousel"  onclick = "plusDivs(1)" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>');

        var slideIndex = 2;
        showDivs(slideIndex);

        function plusDivs(sliderItem) {
            showDivs(slideIndex += sliderItem, sliderItem);
        }

        function showDivs(sliderItem, dir) {
            let i;

            let sliderData = document.getElementsByTagName("section");
            
            if (sliderItem > sliderData.length) {slideIndex = 1}    
            if (sliderItem < 1) {slideIndex = sliderData.length}

            for (i = 1; i < sliderData.length; i++) {
                sliderData[i].classList.add('hide')
                sliderData[i].classList.remove('active')  
                sliderData[i].classList.remove('animated')  
                sliderData[i].classList.remove('fadeInRight')  
            }

            sliderData[slideIndex-1].classList.remove('hide')
            sliderData[slideIndex-1].classList.add('active')
            sliderData[slideIndex-1].classList.add('animated')
            if(dir === 1)
                sliderData[slideIndex-1].classList.add('fadeInLeft')
            else if(dir === -1)
                sliderData[slideIndex-1].classList.add('fadeInRight')
        }
    }
<div type="timeline/slideshow" id="slide">
	<section >
		<header>Title One</header>
		<article>Content</article>
	</section>
	<section >
		<header>Title Two</header>
		<article>Content</article>
	</section>
	<section >
		<header>Title Three</header>
		<article>Content</article>
	</section>
	<section >
		<header>Title Four</header>
		<article>Content</article>
	</section>
</div>

What should i do to resolve this error. Help will be appreciated.

Upvotes: 0

Views: 38

Answers (1)

tareqanwar
tareqanwar

Reputation: 88

Use this code:

let slideElement = document.getElementById("slide");

let sliderData = slideElement.getElementsByTagName("section");

Instead of: 

let sliderData = document.getElementsByTagName("section");

Check this JsFiddle to see how it works: https://jsfiddle.net/4jkvrszw/12/

Upvotes: 1

Related Questions