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.

Answer 1

使用类似以下内容的方法，可以使html的格式保持不变，并通过将“ a07”更改为容器ID来访问其他实例（如果存在）。

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

Answer 2

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

Answer 3

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

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

Answer 4

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