指定したdiv内でのみタグ名で要素を選択する方法

Question

イメージを循環させる簡単なスライドショーを作成しようとしています。私が抱えている問題は、 "image_wrapper" div内の画像のみを選択しようとしたときです。document.getElementById("image_wrapper").getElementsByTagName("img") は、兄弟divの画像も選択するということです。私は、image_wrapper div内のイメージを循環させたいだけです。

左矢印が

var x = 0; 

var hideImage = document.getElementsByClassName("profile_image");   
function displayOne() { 
    for(i = 0; i < hideImage.length; i++) { 
     if(i == 0) { 
     hideImage[0].style.display = "inline-block"; 
     } 
    } 
} 

function addOne() { 
    var profileImg = document.getElementById("image_wrapper").getElementsByTagName("img"); 
    if(x < profileImg.length) { 
     x++; 
    } else { 
     x = 0; 
    } 
    for(i = 0; i < profileImg.length ; i++) { 
     if(x == profileImg.length) { x = 0;} 
     if(x == i) { 
      profileImg[i].style.display = "inline-block"; 
     } else { 
     profileImg[i].style.display = "none"; 
     } 
    } 
} 

function takeOne() { 
    var profileImg = document.getElementById("image_wrapper").getElementsByTagName("img"); 
    if(x > 0) { 
     x--; 
    } else { 
     x += profileImg.length - 1 ; 
    } 
    for(i = 0; i < profileImg.length ; i++) { 
     if(x == -1) { x = profileImg.length; } 
     if(x == i) { 
     profileImg[i].style.display = "inline-block"; 
     } else { 
     profileImg[i].style.display = "none"; 
     } 
    } 
} 

Answer 1

をクリックすると、右矢印ボタンをクリックしたときにaddOne()を呼び出しonclick、HTML、およびtakeOne()あなたは試してみました。

document.querySelectorAll('#image_wrapper img'); 

document.querySelectorAll()とdocument.querySelector()はCSSセレクタを取ることができます。