0

Can you use getElementByClassName to get a class you added with jquery? I added a class with jquery but i can't seem to retrieve it using getElementByClassName. When I console log classList.value all I get is header. Yet when I console log classList i can see this: enter image description here

Just curious if it is possible to target it. I tried to get classList.list(1) but it comes back as null.

Here is my code:

import React from 'react';
import jQuery from 'jquery';
import $ from 'jquery';

export default class ProjectsHeader extends React.Component {

    constructor() {
         super()
    }

    componentDidMount() {

        let head = $(".header");
        let stick = "sticky";

        $(window).scroll(function() {
            $(window).scrollTop() > 400
                ? head.addClass(stick)
                : head.removeClass(stick)
        })

     let projHead = document.getElementById("projHead");




     console.log(projHead.classList);
     console.log(projHead.classList.value);

   }

     render() {
        return (
            <div id="projHead" className="header">
                <div className="not-sticky-div">
                   <div>"This is My Projects Page" McGill</div>
                </div>
                <div className="hidden-span">
                    <span>Something1</span>
                    <span>Something2</span>
                    <span>Something3</span>
                </div>
            </div>
        )
    }
}
Devsterefic
  • 505
  • 1
  • 8
  • 23
  • Short answer: yes. Assuming you mean `getElementsByClassName()` (element**s** plural). – nnnnnn Oct 19 '16 at 02:45
  • do you get any errors in console? - I believe the function is called `getElementsByClassname (...)` (plural elements) - and it returns an array of elements - *BTW* the code posted does not make a call to `getElementsByClassname(...)` so please post an [mcve] – blurfus Oct 19 '16 at 02:45
  • did you try projHead = $("#projHead"); ? . also check this http://stackoverflow.com/questions/1227286/get-class-list-for-element-with-jquery – Syam Mohan M P Oct 19 '16 at 02:47
  • Syam yeah I did. If I console.log($(projHead)[0].classList); I get the image that in the discription. However, if I console.log($(projHead)[1].classList); I get( Uncaught TypeError: Cannot read property 'classList' of undefined). – Devsterefic Oct 19 '16 at 02:53

2 Answers2

1

You can't see it in the console because you are logging it before you add the class.

You are adding the class when you scroll to a position greater than 400px, but you are logging the class list as soon as your component gets mounted. Try to move your console.log to your scroll event's callback.

Also remember that JavaScript events are asynchronous, so even if somehow they are triggered before your componentDidMount function finishes executing, your callback won't be called until the call stack gets empty.

Great talk about JavaScript's Event Loop: https://www.youtube.com/watch?v=8aGhZQkoFbQ

And off-topic advice: Try to get rid of jQuery if you are using React ;)

Agus Zubiaga
  • 512
  • 3
  • 10
0

I was able to target it by adding this line of code. enter image description here

Devsterefic
  • 505
  • 1
  • 8
  • 23