Get element by class?

[supercain]

Yes, what changes for example?

[supercain]

Whoops, duplicate post.

[supercain]

Hello?? nobody knows??

[JMRKER]

Hello?? nobody knows??

So what was wrong with answers in posts #7, #8 or #9?

If they did not answer your question, please restate the problem.

[supercain]

That they not resolve my problem because I need the code to work without need of establishing IDs, but only classes. Thats the purpose of this topic.

Thank you.

[grumpyOleMan]

Talk about pulling teeth...

After rereading your input it seems you want to do away with IDs all together and only use classes to style and manipulate your web page.
Manipulating html by classes alone sounds odd but maybe doable as nothing is impossible.

Web development generally has
1: html to show your information
2: classes to improve the style (CSS)
3: IDs to manipulate the behaviour (JavaScript)

Things are a changing sure, but in general terms they still stand...

If you are trying to do thing differently then you need to do some homework of your own and post a request that stipulates the problem clearly with an example that demonstrates it.

[supercain]

Man, thank you for trying to help but really, i dont understand what you mean. I only need this code below:

<script type="text/javascript">
function retract() {
document.getElementById("ret-banner").id = 'exp-banner';
}
function expand() {
document.getElementById("exp-banner").id = 'ret-banner';
setTimeout('retract()', 3000)
}
</script>

but with classes instead of IDs. Is it or not possible?

[grumpyOleMan]

go and have a very close look at post #8 and #9....................................

[supercain]

I did man, and you are using IDs in both examples...

[grumpyOleMan]

Yes I do because I follow general convention of using IDs to manipulate html and reserve classes to style the html.

post #21 laid that out clearly....

So my observation that NO IDs are allowed is correct...

[supercain]

Yes, i cant use IDs here. Im limited to classes only. Could you please tell me why doesnt this work:

<script type="text/javascript">
function retract() {
document.getElementByClassName("ret-banner").className = 'exp-banner';
}
function expand() {
document.getElementByClassName("exp-banner").className = 'ret-banner';
setTimeout('retract()', 3000)
}
</script>

Thank you.

[grumpyOleMan]

go back to post #7 and read what I wrote about #getElementsByClassName#

What does it return....

[grumpyOleMan]

and guess what Post #9 has all the parts to make it work as you require...

Being old/grumpy/busy distracted my thoughts somewhat and I pray you work out the solution yourself as that is the best way to learn...

[s-p-n]

// cycle through list of elements:
function cycle (elements, func) {
  var element;
  if (!(elements instanceOf Array)) {
    return func.call(elements, elements);
  }
  for (element in elements) {
    return cycle(element, func);
  }
};

// Get all elements found with a class 'className'
var classes = document.getElementsByClassName('exp-banner');

function retract () {
  function run (element) {
    element.className = 'exp-banner';
  }
  cycle(classes, run);
}

function expand () {
  function run (element) {
    element.className = 'ret-banner';
  }
  cycle(classes, run);
  setTimeout(retract, 3000);
};

Since getElementsByClassName() returns a list, we can cycle through that list and execute a function for each element within that list. Very useful. If you want to use classes with JavaScript, you are not restricted to creating a unique ID on every element- and can use the same class on many elements, as well as use more than one class on any given element. Since it is not useful nor reliable to get only one class of an element- there is no function 'getElementByClassName'. To get all elements with a given className, use (note the 's' in 'Elements'): 'getElementsByClassName()[0]' to get the first element found with a given className. Or, as my example does, you can cycle through a list of elements (returned by getElementsByTagName or getElementsByClassName or querySelectorAll, and more...).

Hope that helps.

[supercain]

Thanks for your answer s-p-n. Im trying your code but i cant get it to work. Is it okay to enclose it like this within the head tags?

<script>
// cycle through list of elements:
function cycle (elements, func) {
var element;
if (!(elements instanceOf Array)) {
return func.call(elements, elements);
}
for (element in elements) {
return cycle(element, func);
}
};

// Get all elements found with a class 'className'
var classes = document.getElementsByClassName('exp-banner');

function retract () {
function run (element) {
element.className = 'exp-banner';
}
cycle(classes, run);
}

function expand () {
function run (element) {
element.className = 'ret-banner';
}
cycle(classes, run);
setTimeout(retract, 3000);
};
</script>