Javascript wont respond to classes

[boen_robot]

OK... here's the thing... remember what I said earlier about the computer being unable to deal with ambiguities?The array currenctly contains numbers that correspond to each member, along with all these properties and methods. Members of an array can contain anything. Only you know for a fact that document.getElementsByClassName()'s members are only going to be elements. In fact, you could later, if you wanted to, add arbitrary members to the array that are not HTML elements. Imagine that you add a string. Besides it's exact value, a string also has all these methods and properties.With that in mind, imagine you do:

elementsPlusStringCollection.concat(anotherArray, aString);

What exactly should happen for that? Should the elementsPlusStringCollection be concated with anotherArray, and all characters of aString (which will be dissolved to an array with each character being a member of the array)? Or should all members that have a concat method (i.e. the string) have that method executed with those values in mind, therefore making the string contain the toString() value of anotherArray, along with aString. If the second case, what about the members that didn't had this method (i.e. the elements)? Do you need to know that they failed, and if so, how do you find out which ones failed?All of these scenarios are valid in their own right, and only you know for sure which one is correct. In the current design of JavaScript, the browser will always call the concat() method of the elementsPlusStringCollection, regardless of what the members are, since there are never ambiguities in that scenario. "But the array and string don't have a 'style' property! No ambiguity there." I hear you say. Today, that's true, but what if tomorrow for whatever reason some browser decides to add such a property to the array and/or string object? You arrive on the same place as in the above scenario... no wait, on a worse place... some browsers will do the old way (which was correct), and others will do the new way (which would also be correct for browsers that implement the 'style' property on arrays and/or strings). Arguably, we have a similar situation today, but the difference is that we're able to point to a browser and say "that browser is doing it wrong". With a design like yours, both browsers do it right, unless the spec explicitly forbids or requires the style property on arrays and/or strings.On a side note, I think the jQuery library implements what you want for its own methods. Once you link your document to it, I believe you can do:

$('.item').style.opacity = "0";

If jQuery decides to implement a "style" property, you won't get it unless you opt-in to the new version. And that would be true for all browsers. The "correct" behaviour will unambiguously be whatever the jQuery you link to defines.

[justsomeguy]

You can also do this with jQuery:$('.classname').css('opacity', 0);Looks pretty easy, and it's made possible by the fact that Javascript is designed the way it is. You haven't thought through the implications of what it means to implement your "solution", so there's no reason for me to try to explain why that's not a good idea beyond what boen_robot already did. In the future, please control your language, keep it PG.

[thescientist]

I thought i already explained how to fix this design error. Instead of

<script type="text/javascript">function transition() {  var elements = document.getElementByClassName('item').style.opacity="0";  for(var i = 0, l = elements.length; i < l; i++){	elements[i].style.opacity = "0";  };};</script>

this

<script type="text/javascript">function transition() {			document.getElementsByClassName('item').style.opacity="0";}</script>

Just let people write the class name they want, and by default getAllFckingElementsByThatClassName('goddammit'). They already let you write the number after it if you needed to select a particular element with that class name, why wouldnt the omission of that number constitute a select-all? ######, if there were some huge technical reason why the laws of mathematics couldnt possibly allow such a thing, it could be as simple as saying [all] or [-] or [n]. Its a select-all command for christs sake, what, are we back in 1992? Do i need to get out my floppy diskettes so i can load the dos command for select-all?

or, just use an id.....

<script type="text/javascript">function transition() {			document.getElementById('item').style.opacity="0";}</script>

I'm not sure what's left to get. Classes are meant to be used more than once on a page, that's why it's returned as an array (collection). Id's are meant to be used once, that's why it's just returned as a reference. We've also said that you can pass a reference to any object to any function, so it solves you're problem of having to know which element is clicked, focused, etc, etc. These programming conventions aren't going to change after decade's worth of use just because you don't get it. And swearing and name calling makes your "case" all the more less convincing. Maybe if you just learned the conventions and basic concepts of programming you wouldn't still be beating your head over the concept.

[612wharfavenue]

Well i dont know anything about higher level programming, so you may have a point, but at the very least they could offer a simplified version of javascript that forgoes the use of strings and whatnot for the rest of us who just want to use it for basic functionality.

[ShadowMage]

Well i dont know anything about higher level programming, so you may have a point, but at the very least they could offer a simplified version of javascript that forgoes the use of strings and whatnot for the rest of us who just want to use it for basic functionality.

I would consider your task in this thread pretty basic functionality. I'm not sure what you expect to be able to accomplish without the use of strings, though.... Strings are part of the most basic of the basics...and a core part of how everything else works. (the getElementsByClassName accepts a string argument for example)

[thescientist]

Well i dont know anything about higher level programming, so you may have a point, but at the very least they could offer a simplified version of javascript that forgoes the use of strings and whatnot for the rest of us who just want to use it for basic functionality.

see, that's what we're trying to tell you....(pretty much what SM said)...nothing in this thread would even be considered higher level programming concepts. Loops, strings, arrays, indexes are the most fundamental and basic of concepts to grasp. It literally starts there and works up.

[612wharfavenue]

Oh, then someone needs to make a WYSIWYG for JS. Like max/msp.

[boen_robot]

If you're able to learn JavaScript and make such an editor yourself afterwards, I'm sure you'll be successful. If it's a free one, we'll even let you make a separate topic for critiques on it. If it isn't... we'll reccomend it if people look for something like it.There are some editors out there that try to make guesses for the methods you may be wanting to execute as you're typing (since it's a guess, such editors can easily be fooled, but they do a good job sometimes; at least they let you check your spelling) and can complete the typing for you if you let them... but I am yet to see a WYSIWYG editor for JavaScript, so anything you can come up with has got to be good.

[justsomeguy]

A WYSIYWG editor for Javascript would be sort of weird, Javascript only really interacts with HTML elements instead of having an interface library of its own. A search isn't very helpful, searching for "Javascript WYSIWYG editors" returns results for WYSIWYG HTML editors built using Javascript. I have seen WYSIWYG editors for building interfaces using Javascript libraries, like ExtJS, but not one just for regular Javascript. This is a pretty good tool, but it's expensive and specific to ExtJS:http://www.sencha.com/products/designer/

[612wharfavenue]

Well its worth one last try. Is there any other way to address a specific element without using ID's or loops?Followup question: Can you access css properties of an element by using something non-css related like getElementsByName?

[justsomeguy]

If you want to use a library like jQuery, then it will make a lot of the things that you're trying to do easier. It's a script that you include on the page, and then you can use it to make things like this easier. That's what we were talking about in posts 26 and 27. If you don't want to use an external library, then no, there's not a way to do it without using a loop.You can also use document.getElementsByTagName to return a list of items that are a certain tag, but again, it's a list that you loop through.So, you can download and research jQuery, or you can learn this:http://www.w3schools.com/js/js_obj_array.aspand this:http://www.w3schools.com/js/js_loop_for.asp

[612wharfavenue]

setTimeout doesnt work with loops. Super. I tried jquery before, no support whatsoever and the documentation is lacking. No use making a tool if you dont let anyone know how to use it.edit: or maybe theres something special i have to do with loops and setTimeout? <script>function transition() { var s=document.getElementsByName("stuff"); for (var i=0;i<s.length;i++){s.style.opacity="0";}};</script>and setTimeout("entercodehere", 2000);produces <script>function transition() { var s=document.getElementsByName("stuff"); setTimeout("for (var i=0;i<s.length;i++){s.style.opacity='0';}", 2000); };</script>Of course this doesnt work, as detailed here

[boen_robot]

The argument of setTimeout() takes a single statement to execute after the timeout. The for is a whole sequence of such statements, which is why it's failing. See examples on W3Schools.There's also a more efficient way of doing timeouts, not documented on W3Schools (implied in the reference) but it is documented on various other places... namely, I'm reffering to specifying a reference to a function. In other words, as you have a function to be executed at some point, i.e.

function transition() { var s=document.getElementsByName("stuff"); for (var i=0;i<s.length;i++){s[i].style.opacity="0";}}

Specify you want that function executed like:

setTimeout(transition, 2000);

[ShadowMage]

I believe there is also a scoping issue. I think the code you pass to the setTimeout function runs in the global scope. The variable s (which is a reference to the elements you want to change) is local to the transition function and is not available in the global scope. So when the code runs it looks for s but doesn't find one, so s is undefined.

[justsomeguy]

What specifically are you trying to do with setTimeout? There might be an easier way. Do you want there to be a delay between each element changing, or just a single delay before all elements change?

[612wharfavenue]

Yeah i was aware i could call the function in a separate script, but i was going to have a script with a number of property changes, where only certain properties are subject to a timeout. I could always create a special script for those properties and run its timeout in another script, but this is already getting out of hand, i would like some level of concision.

[boen_robot]

You can use JavaScript's anonymous functions feature to place both kind of properties near, like:

setTimeout(function() {	var s=document.getElementsByName("stuff");	for (var i=0;i<s.length;i++){		s[i].style.opacity="0";	}}, 2000);/* Other properties that need to be manipulated immediatly, or on a separate timeout. */

[612wharfavenue]

Thanks that worked.