Develop Reference

configuring my code to append to child instead of innerHTML

I have this code I wrote
Currently it uses innerHTML to write to the page with a forloop. However, I noticed that instead of writing everything. It just writes the last element in the array.
I searched and saw that I have to use the DOM to get this done as innerHTML will ALWAYS destroy instead of replacing. So I wrote this
function print(message) {
var mydiv = document.getElementById("box");
mydiv.appendChild(document.createTextNode(message));
}
To go inside my code and replace the innerHTML line. However, this doesn't seem to work. Can anybody help me getting it running?
by "this doesn't seem to work" i mean that the code won't append to the child of box. so my text will not be inserted into the element with the 'box' ID.
What i want to happen is just like in my codepen where i used innerHTML but instead of each only the last element in the array showing up, i want them all to show up
edit:
okay updated the codepen. seems the code I posted on this page kinda works. but it doesn't seem to go in the right place. if you check the codepen and add some text and scroll down you can see it doesn't fit into place

Change the print function in this way:
function print(message) {
var html = document.getElementById("box").innerHTML;
document.getElementById("box").innerHTML = html + message;
}
http://codepen.io/anon/pen/bwBOdq

How to display a little window with onmouseover

I am trying to use this code to display some data when the mouse is over that link:
<span id="ssd" onmouseover="this.T_WIDTH=210;this.T_TITLE='(0/0) mqe= ';"><a href='http://en.wikipedia.org/wiki/Decision_tree_learning'>http://en.wikipedia.org/wiki/Decision_tree_learning</a></span><br/>
Do you see something wrong because I can't make it work.

Let's get away from this DOM level 0 stuff:
var spSsd = document.getElementById("ssd");
spSsd.addEventListener("mouseover", function () {
this.style.width = "240px";
this.setAttribute("title", "(0/0) mqe");
});
I assume your this.T_WIDTH=210 was supposed to set the width of the span, and this.T_TITLE=(0/0) mqe was supposed to set the title? The code above should do that, just note that you need to set your span to display:block for this to work, since inline elements don't really have a width.
Just make sure you put this script at the bottom of your body; executing it in the head will give you a null error, since the span ssd will not have been created yet. Or if you're using jQuery, you could put it in the document.ready function.

Some suggestions try the following
jQuery Bubble Popup
JQuery Popup Bubble Question on Stackoverflow

Problem with jQuery - error when trying to find 2 tags

I have the following DOM structure:
/*:DOC += <div id='testDiv' class='testDivClass'><div id='innerTestDiv'></div></div><span id='testSpan' class='testSpanClass'><span id='innerTestSpan'></span></span>
Now I tried to run jQuery select against them as follow. The first one returned alright, but the second one failed:
// works
var result = $('#testDiv')[0];
alert(result.id);
// failed: id is null or not an object
var result2 = $('#testSpan')[0];
alert(result2.id);
I tried selecting id instead of class and got the same results.
My question is: how can I get the second select to work? Is there some sort of invisible iterator/pointer in jQuery which I need to reset to the beginning of the DOM before the second select?
Thanks.
EDIT: Ok this is the official "does not work" version. testDiv matched, but testSpan did not, hence I got an error saying id is null or not an object error in the second alert.
UPDATE: I did a test by swapping testDiv and testSpan in the html. Now BOTH select failed.
UPDATE2: I have changed the html back to what it used to look like. I'm using JsTestDriver to write up the test, but it is actually not calling anything at the moment. The actual html looks messier than this (more nested tags). I'm trying to get this simplified version to work first. It appears that jQuery was able to get into the first select, whether it'll be span or div, but couldnt get out of it to do the second select. I've replaced jQuery.js and jsTestDriver.jar to no avail.
Thanks.

The .className selector matches by class, not ID.
Therefore, $(span.testSpan) won't match any elements.
You need to change it to $('span.testSpanClass') ot $(span#testSpan') (using the #id selector, which matches ID).
For more information, read the documentation.

I don't know why, but for me your code worked well.
I added $(document).ready(function() { before that code, and when I opened the test page, the alert box showed up perfectly, both of them! I don't know when do you want this alert box showed, but if it is when visitor open the page, just add that code. Otherwise, add
function objectid() {
var result = $('#testDiv')[0];
alert(result.id);
var result2 = $('#testSpan')[0];
alert(result2.id);
}
That code worked well for me, too.
PS: Sorry if you don't understand my bad english.

More than likely, there is something else wrong with the HTML you're actually using. Since you're posting only a tiny bit of the html, we can't actually test your problem. Post the entire page, or at least the smallest piece of it that actually has the problem when you run your test.

I tested the jQuery code you reported on JS Bin, and the code worked fine. As the code is very basic, I don't think the problem is caused by the version of jQuery used.

What I ended up doing is wrapping the entire html with a div or span tag. I found that jQuery could not get out of a div/span tag once it gets into one (in my above example), so I just make it to go into a div/span tag once.
Not sure whether this is a patch or ugly fix, but it solved my problem for now.
Thanks for all the help!

Use "#" to select by id, use "." to select by class...

Javascript getElementById - reading works, altering doesn't

So, I have this pretty complex ajax thing going.
It loads new html (including div tags and all) to show up on the page.
I included a 'more' link to load additional data.
This more link links to my javascript function. The 'more' link is located in a div, which I gave a unique id. The next time the load function is called, I use document.getElementById(the id).style.display="none"; to "remove" this div from the look of the page.
I set error traps for this, the div with that id is found without problems, but javascript fails to change my style property.
I tested alert(document.getElementById(the id).innerHTML); and that worked without problems - hence the title of the question.
So, does anyone have any ideas/do I need to offer more information? The main problem is that it doesn't throw any errors anywhere, yet it fails to complete the task I asked...
Here's a bit of code to go with it -
try
{
var myidthing = "morelink" + ContentStart.toString(); //the id is correct
var div = document.getElementById(myidthing);
if (!div)
{
}
else
{
div.style.display="none"; //this doesn't work, but doesn't raise an error
alert(div.innerHTML); //this works without problem
}
}
catch(theerr)
{
alert(theerr);
}
------------------------->EDIT<-------------------------
I'm incredibly sorry if I upset any people.
I'm also angry at myself, for it was a stupid thing in my code. Basically, I had a variable that stored the contents of a parent div. Then I (succesfully) removed the div using the removeChild() method. Then my code pasted the contents of that vaiable (including the div I wanted gone) back into the parent div.
I switched around the order and it works fine now.
Again, excuse me for this.

Throwing out a few ideas of things to look for:
You said the div is generated by javascript. Is it possible the div you are targeting is not the one you think you are? It could be you are targeting another div, which is already hidden, or obstructed... or maybe the innerHTML you are displaying goes with a different element than the one you intend to target. Put an alert or script breakpoint in the if(!div) case, also, and see if it's going down that path.
If the above code is only a stripped-down version of your actual code, check your actual code for typos (for example: style.display = "none;";)
Using the FireBug plugin for FireFox, inspect the target element after the operation completes, and make sure that the display: none appears in the style information. If not, use FireBug's debugger to walk through your javascript, and see if you can figure out why.
Use FireBug to break on all script errors, in case there is another error causing this behavior.

Try empty quotes instead of 'none' and see if that works?:
document.getElementById('element_id').style.display="";
Failing that, don't change the style, just add a class which hides the element.

Frustrating issue with JavaScript's getElementById()

This is the gallery I've been asked to implement
http://sandbox.leigeber.com/slideshow/
I've chopped and changed it ever so slightly so it'd fit into the new site's templating system a bit easier.
Whenever I run it, this line causes an error
ta=document.getElementById(thumbid);
Saying that ta is null. I know the thumbid var's value does exist as an Id of the unordered list.
I've tried to figure what's been going on for at least half an hour now, and can't seem to nail it!
Can someone please tell me what I'm doing wrong?

Yeah the code looks fine, and running the same lines from Firebug console work OK, so it makes me wonder if the thumbs element actually exists at the time of running? Is it in a document.ready-style handler? If it's being called before the element exists on that page, then ta will be null, which would create that error.

It looks like the slideshow function is called for initialization too early. This will be called before the DOM tree is ready:
var slideshow = function() {
...
} ();
try removing that () at the end.

Good news! jQuery is written in vanilla Javascript! You should be able to copy out their method for getting elements by ID and use that.

It's a little unclear what value thumbid should have, but it looks to me like your problem is that the li items in your unordered list don't have ids, they have values.
Calling document.getElementById('thumbs') works fine to get the ul element of the list itself.

In Safari 4 line 19 was throwing me a type error regarding ta which was null.
This is due to the line you pointed out where ta was assigned.
I like how you encapsulate the functions in a closure, but I think the window.onload can be changed to be more jQuery like; the same can be said of actually selecting the elements you're looking for, something like t=$('ul#thumbs li') should do the trick. I don't know if throwing a var in front of ta is going to fix anything, but it's worth a shot.