getElementsByClassName doesn't work inside div element

Question

I have 2 HTML files Home.html & test.html. I'm loading test.html using javascript into a DIV in Home.html. When i try to use getElementsByClassName to get a element in Test.html, it doesnt return anything. What am I doing wrong here? When I click on URLs in the Home.html page it should load as below right? Why doesn't it?

1.jpg
2.jpg

I went through the other questions posted here, but I couldn't find the problem. I ran this on chrome in windows 7.

I am new to HTML designing, please be gentle!

Home.html

<html>
<head></head>
<body>

<script type="text/javascript">
var x;
var i;
var txt;
function foo()
{
    x = document.getElementsByClassName("gallery");
    for (i = 0; i < x.length; i++) {
            txt = txt + x.elements[i].src + "<br>";
    }
    document.getElementById("txt").innerHTML='<object type="text/html" data=txt ></object>';
}
function load_test(){
        document.getElementById("content").innerHTML='<object type="text/html" data="test.html" ></object>';
}
</script>

<div id="topBar"> 
    <a href ="#" onclick="load_test()"> HOME </a> 
    <a href ="#" onclick="foo()"> URLs </a>
</div>

<div id="content"> </div>

<div id="txt"> </div>

<div id="test"> 
    <img class="gallery" id="gallery" src="1.jpg" border="0" />
    <img class="gallery" src="2.jpg" border="0" /> 
</div>

</body>
</html>

Test.html

aaaaaaaaaaaaaaaaaaaaaaaaaa
</br><img class="gallery" id="gallery" src="1.jpg" border="0" />
</br><img class="gallery" src="2.jpg" border="0" />

possible duplicate of [How to get html elements from an object tag?](http://stackoverflow.com/questions/8798745/how-to-get-html-elements-from-an-object-tag) — Dave, Nov 19 '14 at 21:23

score 1 · Answer 1 · answered Nov 19 '14 at 21:17

There are a few things wrong.

txt needs to be initialized to an empty string because you are appending to it.

x has no property named elements; rather it is the array of elements returned by getElementsByClassName(), in this case they are <img> elements which have a src property.

I am not sure why you are using the <object> tags since you are building an HTML string in your loop. Give this a shot:

    var x;
    var i;
    var txt = "";
    function foo() {
        x = document.getElementsByClassName("gallery");
        for (i = 0; i < x.length; i++) {
            //txt = txt + x.elements[i].src + "<br>";
            txt = txt + x[i].src.replace(/^.*[\\\/]/, '') + "<br/>";    // use this regex to get only the filename as in your example
        }
        //document.getElementById("txt").innerHTML = '<object type="text/html" data=txt ></object>';
        document.getElementById("txt").innerHTML = txt;
    }
    function load_test() {
        document.getElementById("content").innerHTML = '<object type="text/html" data="test.html" ></object>';
    }

Thank You! the .elements was the problem. I got that syntax from W3Schools site, didn't realise it was wrong. Edit: Damn, i thought that solved it. It didn't, the img elements from the Test.html are still not accesible. — Amith Raravi, Nov 19 '14 at 21:31

score 0 · Answer 2 · answered Nov 19 '14 at 21:18

0

There is no property called elements in your array x. As you iterate over your elements, the line to set the var txt needs to be the following:

txt = txt + x[i].src + "<br>";

answered Nov 19 '14 at 21:18

James Irwin

1,171
8
21

Damn, i thought that solved it. It didn't, the img elements from the Test.html page(loaded into the DIV of Home.html) are still not accessible. – Amith Raravi Nov 19 '14 at 21:37
See the comment from Dave on your original question. What you need to do is load the `object`, and then run something like `document.getElementById('content').getElementsByClassName('gallery');` to search inside it (that specifically doesn't work, but that's the idea). – James Irwin Nov 19 '14 at 22:04

score 0 · Answer 3 · answered Nov 19 '14 at 21:20

Not sure what the load_test() function is supposed to do but I changed the html a bit for what I think you are trying to do?

<html>
<head></head>
<body>

<script type="text/javascript">
var x;
var i;
var txt = "";
function foo()
{
    x = document.getElementsByClassName("gallery");
    for (i = 0; i < x.length; i++) {
            txt = txt + x[i].src + "<br>";
    }
    document.getElementById("txt").innerHTML=txt;
}
function load_test(){
        document.getElementById("content").innerHTML='<object type="text/html" data="test.html" >      </object>';
}
</script>

<div id="topBar"> 
<a href ="#" onclick="load_test()"> HOME </a> 
<a href ="#" onclick="foo()"> URLs </a>
</div>

<div id="content"> </div>

<div id="txt"> </div>

<div id="test"> 
    <img class="gallery" id="gallery" src="1.jpg" border="0" />
    <img class="gallery" src="2.jpg" border="0" /> 
</div>

</body>
</html>

What I basically changed is the fact that your txt variable was not initialized, that you were using a non-existant "elements" property on an array where you simply needed to use the index to access.

Niffler · Answer 4 · 2014-11-19T22:22:34.073

There are a couple of issues:

The variable "txt" needs to be defined within the function "foo()"; you're trying to define it outside the function, but actually you're defining it here: txt = txt + x.elements[i].src + "<br>"; But if you define it here, the definition of itself contains itself (txt = txt + ...), so it will contain the word "undefined". (Hope that made sense.)
The code you're using to get the image sources isn't correct; instead of x.elements[i].src, use x[i].src.
The content from your second HTML file needs to be fetched with ajax. For this I would create a hidden div, so you can load the content from your second HTML file into there, and then use it in your script. (In the example below, I gave the hidden div the id="ajaxContent".)

Here's how I would change your script:

var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        xmlhttp.responseText;
        document.getElementById("ajaxContent").innerHTML = xmlhttp.responseText;
    }
}
xmlhttp.open("GET","test.html",true);
xmlhttp.send();

function foo()
{
    x = document.getElementsByClassName("gallery");
    txt = '';
    for (i = 0; i < x.length; i++) {
        txt = txt + x[i].src + "<br>";
    }
    document.getElementById("txt").innerHTML = txt;
}

And the "new" HTML for Home.html (just the hidden div at the bottom):

<div id="topBar"> 
    <a href ="#" onclick="load_test()"> HOME </a> 
    <a href ="#" onclick="foo()"> URLs </a>
</div>

<div id="content"> </div>

<div id="txt"> </div>

<div id="test"> 
    <img class="gallery" id="gallery" src="1.jpg" border="0" />
    <img class="gallery" src="2.jpg" border="0" /> 
</div>

<div id="ajaxContent" style="display: none;"></div>

And here's a fiddle (without the ajax part - I don't think you can do ajax with JSFiddle): http://jsfiddle.net/Niffler/pnv1jy1m/

(I didn't know what you were doing with the "object" thing, so in my script I changed it to just output the text...)

Damn, i thought that solved it. It didn't, the img elements from the Test.html are still not accesible. Maybe I should elaborate, I'm trying to get the src elements from Test.html(loaded into DIV of Home.html) using getElementsByClassName function. I have created 2 img elements in home.html just to test it. The getElementsByClassName function gets the 2 img elements from Home.html, but not the 2 img elements inside test.html. — Amith Raravi, Nov 19 '14 at 21:41
If you want to get the file names from a different HTML file, you'll need to use ajax... — Niffler, Nov 19 '14 at 21:51
@raravi I've adjusted my answer to contain ajax, so you can fetch the image sources from test.html as well. — Niffler, Nov 19 '14 at 22:19

score -2 · Answer 5 · answered Nov 19 '14 at 21:09

-2

It can't find your foo function because of JavaScript's scoping rules.

If you want foo to be accessible globally, define it like this:

document.foo = function()
{
//...etc

answered Nov 19 '14 at 21:09

Jonathan.Brink

23,757
20
73
115

Then it shouldn't be able to find the load_test() either, right? But that function runs fine! Edit: Tried the syntax above, it didn't work. – Amith Raravi Nov 19 '14 at 21:15
When I try to run 'document.getElementsByClassName("gallery");' in chrome console, I don't get the elements from Test.html, but the elements in DIV(id="test") are returned fine. Weird... – Amith Raravi Nov 19 '14 at 21:19

getElementsByClassName doesn't work inside div element

5 Answers5