Jump to content

GetElementsByClassName


jimfog
 Share

Recommended Posts

I have this html here-a span element:

<span class="fc-button fc-button-agendaWeek fc-state-default fc-state-active" unselectable="on">week</span>

It is HTML related to the week button of a calendar.When the calendar is on week view the above HTML is seen.

Otherwise:

<span class="fc-button fc-button-agendaWeek fc-state-default" unselectable="on">week</span>

More specifically the fc-state-active class is absent.

 

The question is how am I going to verify that the fc-state-active class is indeed there-as an indication that week view is indeed active-shown in the calendar.

Link to comment
Share on other sites

I am afraid that what you suggest requires selecting the element first.

In my case there are many span elements not just one and none of them has an ID attached to it...only classes are found.

 

Sorry,,,but I am little confused.There must be a workaround to it.

 

Or if the element could be the class itself...I just had this thought.

Edited by jimfog
Link to comment
Share on other sites

Τhis is the code(a test version):

var elements = document.getElementsByClassName('fc-button-agendaWeek');if (elements.className === "fc-state-active") {alert('test');}else {alert('no test')};

I get "no test".

It does not make sense though,cause in the HTML the fc-state-active class is present.

Link to comment
Share on other sites

I am afraid that what you suggest requires selecting the element first.

You put the solution right in the title of the thread...

In my case there are many span elements not just one and none of them has an ID attached to it...only classes are found.

Does it really matter which one you check if they all have the same classes?This is still another hack to try and figure out what mode the calendar is in, though. I guarantee there is a variable tracking the state of the application.
Link to comment
Share on other sites

This is what I did,it ought to work but it did not:

var span = document.getElementsByTagName("span")[8];span;<span class=​"fc-button fc-button-agendaWeek fc-state-default fc-state-active" unselectable=​"on">​εβδομάδα​</span>​if (span.className === "fc-state-active") {  alert('week is asctive');}else{alert('week is not active');}undefined

The code above is printed in the console.

First I target a specific span element and then use a conditional to check is "fc-state-active" class is present in the span element-which in this case it is.

 

Despite that, I get undefined in the console.

 

Beyond that, I do not know what else to try.

Link to comment
Share on other sites

Probably here is the cause of the problem....span.classname prints that:

fc-button fc-button-agendaWeek fc-state-default fc-state-active"

So a code like this:

if(span.className==='fc-state-active'){alert('test');}

would not work cause there are other classes present too in the specific element.

 

Your thought though to check what span.className prints was correct-the result did not surprised me though.

 

So, the problem remains-finding if the specific class is indeed there.What can be done?

Use a string method to find if it is there? A regular expression?

Link to comment
Share on other sites

I'm not really sure what the problem is though? Why can't you use getElementsByClassName?

http://jsbin.com/bolovobu/3/

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <title>JS Bin</title></head><body>  <span class="fc-button fc-button-agendaWeek fc-state-default fc-state-active">One</span>  <span class="fc-button fc-button-agendaWeek fc-state-default">Two</span>  <span class="fc-button fc-button-agendaWeek fc-state-default">Three</span></body></html>
window.onload = function(){  console.log('Active => ' + document.getElementsByClassName('fc-state-active').length);  //logs 1}
Link to comment
Share on other sites

As I said again I need to detect the presence of fc-state-active...since this will not be always there.

That is the problem

Link to comment
Share on other sites

As I said again I need to detect the presence of fc-state-active...since this will not be always there.

That is the problem

how does the above NOT help you? if length is zero, then it's not there.

 

note: you can use getElementsByClassName on other DOM elements, not just document.

Link to comment
Share on other sites

hm...in the rush I did not saw the whole code above...sorry. But...

I am going to go one step further.

 

Despite your code being OK I do not know if it helps achieve my broader goals...If it does not this will not be your fault but mine which did not

described correctly the nature of the problem...so:

here is the html:

<span class="fc-button fc-button-agendaWeek fc-state-default fc-state-active" unselectable="on">week</span><span class="fc-button fc-button-agendaDay fc-state-default fc-corner-right" unselectable="on">day</span>

The issue is this:

Where fc-state-active appears...in the span element related to week or to the span element related to day.

 

I think a conditional will solve the issue here....but I wanted to hear your opinion too.

 

It is just a matter of combining all the things together now properly.

Link to comment
Share on other sites

So, the problem remains-finding if the specific class is indeed there.What can be done?

Considering the fact that the MDN documentation says that className contains a list of classes separated by spaces, the obvious solution would be to split the string on spaces and then check if the class you are looking for is in the array.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...