Question

I have a function like so:

function div_id( parent , child ) {
    var children = document.getElementById(parent).childNodes;
    for (var i=0; i < children.length; i++) {
        if (children[i].id == child ) {
            return children[i];
            break;
        }
    }
    return null;
}

and my div is set up like so:

<div id="table_seats_box">
    <div id="table_seat_0">
        <div id="table_seat_0_d"></div>
        <div id="table_seat_0_player_name"></div>
        <div id="table_seat_0_portrait">
           <div id="table_seat_0_card_0"><div id="table_seat_0_card_1"></div></div>
           <div id="table_seat_0_chips"></div>
           <div id="table_seat_0_status"></div>
        </div>
    </div>
</div>

and my code is like so:

var t_s_p = "table_seat_" + player_table_position;
var t_s_p_p = "table_seat_" + player_table_position + "_portrait";
var children = div_id ( t_s_p , t_s_p_p );
children.style.backgroundImage = "url(images/class/" + image_id + ".png)";

But it does not seem to change the background image. Am I doing something wrong? The w, h and visibility is all good on the css. Thanks for the help.

edit fixed the “)” but still not working.

FYI: image is is just a number

Answer 1

You’re not closing the url( opening parenthesis, change your backgroundImage definition to:

children.style.backgroundImage = "url(images/class/" + image_id + ".png)";

Note: you can optionally simplify your div_id function:

function div_id(parent, child) {
    return document.getElementById(parent).querySelector("#" + child); /*IE8+, all other modern browsers*/
}