Sup3rkirby

I feel some clarification is needed here. By looking at your code it seems you are trying to dynamically reference an array. You have 2 arrays (named fruitSalad and nuttySalad) and you want to reference these arrays by dynamically building the name (via concatenation of 'fruit'/'nutty' and 'Salad').

Using the window object, you can access any global variables such as your arrays, and it can all be done using other dynamically generated variables (such as your concatenated strings).

Keep in mind that when you run your function more than once, it overwrites the text in the 'display' <div>. I also may be wrong in what you were trying to achieve in which case I think I need some more details on what you want your result to be.

deathshadow

I'm not quite sure I'm following what you are trying to do... though I suspect this might be better handled by an OBJECT. I'd probably also not use innerHTML since we were SUPPOSED to stop using it a decade ago... likewise your first call would override the second instance, did you mean to add instead of replace? and if you moved the script to the end of BODY you could skip the onload nonsense and just build an anonymous function instead. (as the DOM would exist at that point). I'd probably also throw some error responses on that function for good measure...

Oh, and there is NO legitimate reason to put a name on a DIV -- in fact, by the specification DIV don't even HAVE a name property. -- The only attributes DIV has is the deprecated (meaning you have no business using it any time after 1997) ALIGN, as well as the common attributes of ID, CLASS, STYLE, TITLE, LANG and DIR.

locbtran

huh?!?
I have no idea what you did deathshadow. I am totally confused on function nodeAdd() and saladType()
If someone could decrypt those two functions, that would be great.

Sup3rkirby

Well first it's worth noting he converted your two arrays into an object. So you now have an object with two keys (Fruit and Nutty), each with their respective arrays (making things more organized and easier to work with).

Next, the nodeAdd() function is designed to add a new element to the page. In context he's adding a <div> element to the page. First it creates a new element based on the tag you pass in (a 'div' in this case). Next it checks to see if any content for this new element was passed in (which there would be in this case). If the content is an object (such as another element), then it is added directly to this new <div> element (as a child node). Otherwise it's treated as text and added to the <div> as such. And lastly if a parent is passed into this function it will appends this newly created <div> to the parent (which is your 'display' <div>). Of course if no parent is passed in then it simply returns the new element from the function (which could then be manipulated in another function or added elsewhere in the document).

And the saladType() function is similar to the concept you already had. You simply pass in the type of salad (which will be selected from the unified object) and then the actual item (index from the array). First the function checks to see if the type of salad exist in the object, if not the function will return false (and effectively do nothing). Of course in context it does exist and so it proceeds to use the nodeAdd() function explained earlier, where it passes in the element type of a 'div', the type and actual index value from the object and lastly the parent element (display) to add this new element to. And then of course to be polite it returns true and exits the function.

deathshadow

Sup3rkirby;1331801 wrote:

Well first it's worth noting he converted your two arrays into an object. So you now have an object with two keys (Fruit and Nutty), each with their respective arrays (making things more organized and easier to work with).

WAY easier to work with. Instead of having to figure out which array to access, you just index the object's named properties. Basically we're using the same technique as JSON, which could be handy of you end up using AJAX later on. Even if you don't it's something good to learn how to use.

Sup3rkirby did a good job explaining the other two functions. nodeAdd is pretty much lifted from my javascript library combining my Element.nodeAdd and _.make methods into a standalone function. The latter as he said serves the same purpose as your original. The difference is it adds a div with the text inside it using the DOM. Really we're not supposed to be using InnerHTML unless we're "forced to" -- it can cause a complete page reflow which takes time, cpu and for some people battery. DOM manipulation is faster, though it can be more code which is why I make helper functions like nodeAdd to simplify that.

Of course, I have the whole thing in an anonymous function so that nothing inside it pollutes the global namespace -- something one should try to do as much as possible. I run it right before </body> as at that point the DOM is already built, so we don't have to wait for onload as we're not manipulating style, just markup. Doing it that way loads faster and cleaner, and is WAY simpler than trying to use onload.

locbtran

Thank you for the explanation Sup3rkirby. I had to read about 3 or 4 times before I understood it.

Thank you for your help deathshadow.

locbtran

I understand how to display an object of an array now but how would I display a single string using the functions nodeAdd() and saladType() that you taught me deathshadow.

Example: When a user type something into the input field, he then clicks on a button, it just display what he has typed.
If I was to use innerHTML it would be something like this

I tried to do it myself using nodeAdd() function instead of innerHTML but it doesn't work. Not sure what I'm doing wrong.
Here's my code, everything is the same except for the new function setValue() which I created.

deathshadow

Your setvalue method is outside the scope of the anonymous function -- things inside an anonymous function do not even EXIST outside it -- so 'nodeAdd' is nowhere to be found.

As a rule of thumb it's bad practice to use the various onevent attributes in your markup -- it's a scripting only behavior, so it has no business in the markup. It is better to add the handler from the scripting by latching onto the element.

Though using input without a form and failing to write it so the page works without scripting (by going server-side first) is really bad practice.

New function, eventAdd, so you can attach the event instead of using the attribute; nice since it means less markup, so when you move this scripting into it's own little separate file it's cached across page-loads and sub-pages.

Really if I had my way, the various onevent HTML attributes would be deprecated.

deathshadow

Oh, I also think you had the value to be plugged in and the element the new span was going to be a child of reversed... but really the big problem was a matter of scope -- everything in the anonymous function is invisible to anything outside it.