2016-10-07 11 views
0

現在、私は、ボタンのクリックイベントでそのクラス名を使用してdivコンテナの背景イメージを変更しようとしていますが、コンソールでこのプロパティを取得できません。コードで何が間違っているのか理解できません。プロパティを設定できませんbackgroundImageが未定義

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script> 
 
      function slide() 
 
      { 
 
       var ele = document.getElementsByClassName("banner-section"); 
 
       ele.style.backgroundImage = "url(image-2.png)"; 
 
      } 
 
     </script> 
 
    <head> 
 
    <body> 
 
     <!--Main Container Start--> 
 
     <div class="main-container"> 
 

 
      <!--Header Section Starts--> 
 
      <div class="header-section"> 
 
       <!--<img id="logo" src="images/logo/logo-2.png">--> 
 

 
       <!--Navigation Section Starts--> 
 
       <div class="navigation-section"> 
 
        <ul> 
 
         <li><a href="#">Home</a></li> 
 
         <li><a href="#">About Us</a></li> 
 
         <li><a href="#">Our Services</a></li> 
 
         <li><a href="#">Portfolio</a></li> 
 
         <li><a href="#">Contact Us</a></li> 
 
        </ul> 
 
       </div> 
 
       <!--Navigation Section Ends--> 
 

 
      </div> 
 
      <!--Header Section Ends--> 
 

 
      <!--Banner Section Starts--> 
 
      <div class="banner-section" id="x"> 
 
       <button onclick="slide2()">Previous</button> 
 
       <button onclick="slide()">Next</button> 
 

 
      </div> 
 
      <!--Banner Section Ends--> 
 
     </div> 
 
     <!--Main Container Ends--> 
 

 
    </body> 
 
</html>

+0

デバッガの使用を検討しましたか? – Amit

+0

いいえ、私はその使い方を知らない。 –

答えて

3

getElementsByClassName、要素の配列を返すため

var ele = document.getElementsByClassName("banner-section")[0] 

を試してみてください。

+0

"JSコードを最後まで移動すると、DOMの可視性が失われる可能性があります。 - DOM可視性は、関数が定義されているときに*呼び出されない*ときに依存します。 – Quentin

+0

"getElementsByClassNameが要素の配列を返すためです。 - ライブHTMLCollectionであり、配列ではありません。 – Quentin

関連する問題