Access nested objects using HTML and Javascript

Question

relevant part in html:

<td id="a07" bgcolor="brown">
    <button type="button" name="blabla">
        <img name="wknight" src="img/wknight.png" height="45" />
    </button>
</td>

what im tring to do in javascrip:

var knightsource = document.getelementbyid("a07").blabla.wknight.src

This code in javascript is not working. I'm new to javascript.

I want to get to the src of the image put it in a variable and also want to be able to change the src.

show us you html code. is `blabla` and `wknight` are ids too? — Ivan Chernykh, May 12 '13 at 12:11
@adi Welcome to SO. I fixed the formatting for you. Next time please take some time to go through the little help section about formatting before asking the question :) — UltraInstinct, May 12 '13 at 12:16
if you have control over the html then changing img name to img id would make it a whole lot simpler, you could add the id also instead of replacing the name. `` — NickSlash, May 12 '13 at 12:17

score 2 · Answer 1 · answered May 12 '13 at 12:22

2

Using something like the following would allow you to keep the format of your html the same, and access other instances (if they exist) by changing "a07" to the containers id.

document.getElementById("a07").getElementsByTagName("img")[0].src

answered May 12 '13 at 12:22

NickSlash

4,758
3
21
38

This code is interesting. Objects TD has the function getEelment..? – adi May 12 '13 at 12:34
Those functions (getElement.. and getElements..) do not return elements like that, they return DOMNode and DOMNodeList (those names might not be correct, but the idea is). Which do have those methods and functions, which allows you to chain them. (calling a function on the result of another) – NickSlash May 12 '13 at 13:24

Ivan Chernykh · Answer 2 · 2013-05-12T12:17:47.500

1

Turn this line:

<img name ="wknight" src=  "img/wknight.png" height ="45"/>

into this:

<img name ="wknight" id="wknight" src=  "img/wknight.png" height ="45"/>

and then you can get your wknight like this:

var knightsource = document.getElementById("wknight").src

Id is for one and only element on the page , so you can get it directly

edited May 12 '13 at 12:17

answered May 12 '13 at 12:12

Ivan Chernykh

41,617
13
134
146

As this is a table cell, its possible there might be multiple instances of `wknight` so the id might need to be "a07_wknight" or something to avoid duplicates. – NickSlash May 12 '13 at 12:20
my function gets only the id of the table cell - only the "a07" – adi May 12 '13 at 12:21
@adi , so try this solution: http://stackoverflow.com/questions/10306129/javascript-get-element-by-name – Ivan Chernykh May 12 '13 at 12:22

score 1 · Answer 3 · answered May 12 '13 at 12:13

1

I suppose you missed that javascript is case sensitive. Use this line instead:

var knightsource = document.getElementById("a07").blabla.wknight.src

answered May 12 '13 at 12:13

chtenb

14,924
14
78
116

score 1 · Answer 4 · edited May 23 '17 at 12:29

Here is an example for you, assuming that your markup is always formatted the same.

CSS

.imgwk {
    height: 45px;
}

HTML

<table id="table01">
    <thead></thead>
    <tbody>
        <tr>
            <td id="a01" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpg" />
                </button>
            </td>
            <td id="a02" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpg" />
                </button>
            </td>
            <td id="a03" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpgg" />
                </button>
            </td>
            <td id="a04" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpg" />
                </button>
            </td>
            <td id="a05" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpg" />
                </button>
            </td>
            <td id="a06" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpgg" />
                </button>
            </td>
            <td id="a07" bgcolor="brown">
                <button type="button" name="blabla">
                    <img class="imgwk" name="wknight" src="http://thumb1.shutterstock.com/thumb_small/98550/98550,1278941506,3/stock-photo-white-chess-knight-56993335.jpg" />
                </button>
            </td>
        </tr>
    </tbody>
</table>

Javascript

function getImgSrc(tableID, tdId) {
    var table = document.getElementById(tableID),
        tds = table.getElementsByTagName("td"),
        img,
        src;

    Array.prototype.some.call(tds, function (td) {
        if (td.id === tdId) {
            img = td.getElementsByTagName("img");
            if (img && img.length) {
                src = img[0].src;
                return true;
            }
        }

        return false;
    });

    return src;
}

function setImgSrc(tableID, tdId, src) {
    var table = document.getElementById(tableID),
        tds = table.getElementsByTagName("td"),
        img;

    Array.prototype.some.call(tds, function (td) {
        if (td.id === tdId) {
            img = td.getElementsByTagName("img");
            if (img && img.length) {
                img[0].src = src;
                return true;
            }
        }

        return false;
    });

    return src;
}

alert(getImgSrc("table01", "a07"));

setImgSrc("table01", "a07", "http://img135.imageshack.us/img135/8067/daciathaliabe5.jpg"

);

On jsfiddle

Considerations:

Using IDs instead of NAMEs as an ID has to be unique whereas a NAME does not. This may or may not be relevant to your markup, depending on the situation.

Use CSS classes rather than inline styling: Inline Styles vs Classes

This selection method is not the only way to get the desired result, you could also use document.querySelectorAll or an external library like jquery

Access nested objects using HTML and Javascript

4 Answers4