2017-09-25 68 views
0

我已經開始創造某種形象滑塊向右,但在beggining我已經達到了一個問題控制檯說元素是「空」

控制檯說,我IMG1和其他人都是「零」 ..

我的錯誤在哪裏?

let img1 = document.querySelector('.images_first active'); 
let img2 = document.querySelector(".images_second"); 
let img3 = document.querySelector(".images_third"); 

const fw = document.querySelector(".test-button_forward"); 
const back = document.querySelector(".test-button_backwards"); 

let clicks = 0; 
console.log(img1); 


fw.addEventListener('click', function() 
{ 
    img1.classList.remove('active'); 
    img2.classlist.add("active"); 

    clicks++; 

}); 

Full version is here

+0

他們可能還不存在。 – SLaks

+3

它應該是'.images_first.active' – Turnip

回答

1

你的選擇是不正確。 .images_first active將選擇一個元素標籤名稱active這是一個後裔元素與類images_first。即它會在這個例子中發現的內部元件:

<div class="images_first"> 
    <active></active> 
</div> 

然而,實際上似乎想要的是找到一個具有兩個類,images_firstactive的元素。這寫作

.images_first.active 

Learn more about CSS selectors on MDN


相關:Why does jQuery or a DOM method such as getElementById not find the element?

+0

謝謝,但現在它說img2沒有定義。我的意思是當你點擊向前它不能添加一個類到這個元素,因爲它是「未定義的」 – Matt

+0

@Matt:不,錯誤表示它不能在'undefined'上訪問屬性'add'。這是因爲你在'img2.classlist'中有一個錯字。 'list'的'l'應該大寫:'img2.classList',就像前一行一樣。 'img2'本身被定義。 –

1
let img1 = document.querySelector('.images_first.active');