Place holder image with JS Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skinReturn to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
2 posters

    Place holder image with JS

    Hert
    Hert
    Forumember


    Posts : 81
    Reputation : 3
    Language : Dutch and English

    In progress Place holder image with JS

    Post by Hert September 8th 2015, 1:46 pm

    Hello,

    I wanted to have a place holder image for the RPG image, since this field is empty is nothing is put in and I find it prettier if there is an image there.
    I looked around and figured this could be accomplished with the usage of a JS script. I am, however, very inexperienced with these codes and tried something but it didn't work. Sadly.
    So this is the script I tried, I put it in the template of the profile (templates > profile > profile_view_body)
    Code:
    <script type="text/javascript">
    //<![CDATA[

                    if(typeof(_userdata) == "undefined")
                   var _userdata = new Object();
                    _userdata["image"] = "<img src="http://placehold.it/462x65" />";
               
    //]]>
    </script>
    This is the HTML that is relevant:
    Code:
    <td width="462px"><div id="image">{RPG_IMAGE}</div></td>
    And here is an URL: http://dungeon-explorers.actieforum.com/u3 and http://dungeon-explorers.actieforum.com/u1 for an account that does have input in this field.

    Thanks in advance ^^

    Greetings,
    Hert
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13207
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania

    In progress Re: Place holder image with JS

    Post by Ange Tuteur September 8th 2015, 3:57 pm

    Hi @hert,

    You want something like this, right ?
    Code:
    (function() {
      var img = document.getElementById('image');
      if (!img.innerHTML) img.innerHTML = '<img src="" alt="" />';
    })();

    It'll get the element, and then check if the innerHTML content is empty. If it is, then it'll set the innerHTML for it.

    The exclamation mark ( ! ) inverts the condition. In this one it means literally : "if img.innerHTML is empty" The equivalent would be :
    Code:
    if (img.innerHTML == '')