コンテンツJavascript/CSSを使用したスライドショー

Question

divを表示/非表示にしてコンテンツを変更するコンテンツスライドショーを作成しようとしています（slideOne、slideTwo、slideThree ...）。私が持っているjavascriptとはうまく動作しません。なぜそれほど確かではありません。私は下にjsfiddleを作成しました。ボタンは機能/アラートを有効にしていません。

https://jsfiddle.net/1wggk6fw/

セクション/ div要素のためのHTMLコード。

<div class="section"> 
    <div class="slideWrapper"> 
     <div class="fdSlideAbout" id="aboutSlide"> 
     Use the buttons above to navigate through the weeks of your pregnancy! 
       <br> 
       Each week contains information about the little thing that is growing inside you! 
       <br> 
       Each section lists: 
       <ul> 
        <li> the week, month, and trimester you're in.</li> 
        <li>any vital organs that are making themselves known.</li> 
        <li>what to compare the size of baby to for the week.</li> 
       </ul> 
      </div> 

      <div class="fdSlide" id="slideOne"> 
       <div class="development"> 
        <h2> Week One, Month One, Trimester One</h2> 
        <h5> Length: </h5> 
        about 0.014 to 0.04 inches <br> 
        <h5> Weight:</h5> less than 0.04 ounces<br> 
        <h5>Organs Developing: </h5> 
       </div> <!--closing development--> 
       <div class="sizeOf" id="sizeOne"> 
        <p>image goes here</p> 
       </div> <!-- closing sizeOne--> 
      </div> <!--closing slideOne --> 
      <div class="fdSlide" id="slideTwo"> 
       <h2> Week Two, Month One, Trimester One</h2> 
       <h5> Length: </h5> 
       about 0.014 to 0.04 inches <br> 
       <h5> Weight:</h5> less than 0.04 ounces<br> 
       <h5>Organs Developing: </h5> 
      </div> <!--closing slideTwo --> 
      <div class="fdSlide" id="slideThree"> 
       <h2> Week Three, Month One, Trimester One</h2> 
       <h5> Length: </h5> 
       about 0.014 to 0.04 inches <br> 
       <h5> Weight:</h5> less than 0.04 ounces<br> 
       <h5>Organs Developing: </h5> 
      </div> <!--closing slideThree --> 
      <div class="fdSlide" id="slideFour"> 
       <h2> Week Four, Month One, Trimester One</h2> 
       <h5> Length: </h5> 
       about 0.014 to 0.04 inches <br> 
       <h5> Weight:</h5> less than 0.04 ounces<br> 
       <h5>Organs Developing: </h5> 
      </div> <!--closing slideFour --> 
      <div class="fdSlide" id="slideFive"> 
       <h2> Week One, Month One, Trimester One</h2> 
       <h5> Length: </h5> 
       about 0.014 to 0.04 inches <br> 
       <h5> Weight:</h5> less than 0.04 ounces<br> 
       <h5>Organs Developing: </h5> 
      </div> <!--closing slideFive --> 
     </div> <!-- closing slideWrapper --> 
    <br> 
    <div id="fdNavLinks"> 
     <div class="slideNav"> 
      <button class="previous" id="pPage">Last Week</button> 
      <p class="activePage" id="aPage"></p> 
      <button class="next" id="nPage"> Next Week</button> 
     </div> 
</div> 
</div> <!--closing slide section--> 

CSS：

.slideWrapper { 
    width: 97%; 
    transform: translate3d(0,0,0); 
    white-space: nowrap; 
} 

.slideWrapper .fdSlide { 
    float: left; 
    width: 100%; 
    height: 100%; 
    white-space: nowrap; 
    border: thin solid green; 
    background: no-repeat; 
    display: none; 
    padding: 5px; 
    text-align: center; 
} 

#slideOne { 
    background-color: rgba(144,238,144, .5); 
} 
#slideTwo{ 
    background-color: rgba(144,238,144, .5); 
} 
#slideThree { 
    background-color: rgba(144,238,144, .5); 
} 
#slideFour{ 
    background-color: rgba(144,238,144, .5); 
} 
#slideFive{ 
    background-color: rgba(113, 234, 245, 0.5); 
} 

.previous, .next{ 
    color: beige; 
    background-color: darkgray; 
} 

.slideNav { 
    text-align: center; 
    display: inline; 
} 

はJavaScript：

//Fetal Dev 
    //Variables 
var previous = document.getElementById('pPage'); 
var next = document.getElementById('nPage'); 
var slide = document.getElementsByClassName('fdSlide'); 
var prevPage = slide.previousElementSibling.id; 
var nextPage = slide.nextElementSibling.id; 
var firstSlide = slide.id('slideOne'); 
//Functions 

function switchPrev() { 
    //actPage = prevPage.id; 
    alert(actPage); 
    //actPage.style.display = 'inline'; 
} 

function switchNext(){ 
    //actPage = nextPage.id; 
    alert(actPage); 
    //actPage.style.display = 'inline'; 
} 


//Event Listeners 
previous.addEventListener("click", switchPrev); 
next.addEventListener("click", switchNext); 

Answer 1

あなたは要素を検査した場合、あなたはコンソールでjsのエラーを持っていることがわかります。エラーのある変数をコメントアウトし、アラートを文字列に変更しました（その変数は定義されていないため）、[先週]ボタンに警告が表示されました。 http://www.screencast.com/t/9XTYUww35HAX