Creating and showing div's with javascript

Question

I am trying to create a list of friends and to do this I will need to create a div for each one. The code I tried hasn't worked.

Relevant JavaScript (Now at bottom of page):

    document.getElementById("name").innerHTML = user;
        document.getElementById("profilePic").src = "users/" + user + "/profilePic.jpg";

    var friends = ["Test"];
    var friendArea = document.getElementById("friendsDiv");
    for (i=0; i < friends.length; i++) {
        var friendDiv = document.createElement("div");
        friendDiv.setAttribute("class", "friend");
        var friendImage = document.createElement("img");
        friendImage.setAttribute("class", "friendImage");
        friendImage.setAttribute("src", "users/" + friends[i] + "/profilePic.jpg");
        friendDiv.appendChild(friendImage);
        friendArea.appendChild(friendDiv);
    }

Relevant CSS:

    .friends {
        width: 100%;
        height: 90%;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .tools {
        width: 100%;
        height: 10%;
        box-shadow: 0px 0px 3px 1px #898989;
    }
    .friend {
        width: 100%;
        height: 20%;
        padding: 1%;
    }
    .friendImage {
        height: 80%;
        width: auto;
        border: medium #CCCCCC solid;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
    }

The HTML isn't really important but I'll include it anyway.

    <div class="window">
        <div class="rightCorner">
            <img src="images/pPicTemp.png" id="profilePic">
        </div>
        <div class="holder" id="profileData">
            <span id="name"></span>
    </div>
    <div class="sideBar">
        <div class="friends" id="friendsDiv">

        </div>
        <div class="tools">

        </div>
    </div>

what do you mean with "hasn't worked"? What is your exact issue? — Lelio Faieta, Jun 16 '15 at 16:46
just for your info: better not have an id and a class with the same name! you should change this `
` to have a different id or class and adapt your code accordingly — Lelio Faieta, Jun 16 '15 at 16:53
I have changed the javascript in the post and it doesn't do anything. Also, the first two lines used to work but now they don't. — Levi Meredith, Jun 16 '15 at 17:01
By that do you mean change the class and ID? No, but I'll do it now. — Levi Meredith, Jun 16 '15 at 17:04
I did it but it didn't fix anything. Also, does the script need to be in the body (I've tried both but now it's out of the body and I don't know if that will work. — Levi Meredith, Jun 16 '15 at 17:08

Danny Delott · Answer 1 · 2015-06-16T16:52:46.313

0

You're not appending the friendImage to the friendDiv.

It should look like this:

  var friends = ["Test"];
    var friendArea = document.getElementById("friends");
    for (i=0; i < friends.length; i++) {
        var friendDiv = document.createElement("div");
        friendDiv.setAttribute("class", "friend");
        var friendImage = document.createElement("img");
        friendImage.setAttribute("class", "friendImage");
        friendImage.setAttribute("src", "users/" + friends[i] + "/profilePic.jpg");
        friendDiv.appendChild(friendImage);
        friendArea.appendChild(friendDiv);
    }

Also, be sure to put this script at the bottom of your HTML <body></body> tag so that the HTML has loaded the entire document before the JavaScript attempts to get elements from the page.

edited Jun 16 '15 at 16:52

answered Jun 16 '15 at 16:37

Danny Delott

6,756
3
33
57

I fixed that literally seconds before you posted. It still didn't work though :) – Levi Meredith Jun 16 '15 at 16:39
Did it, still didn't work. It should show up even if there is nothing inside of it. – Levi Meredith Jun 16 '15 at 16:43
Are you putting this script at the bottom of your HTML page? – Danny Delott Jun 16 '15 at 16:48
No, does it need to be? – Levi Meredith Jun 16 '15 at 16:50
Yes, otherwise the page will not have loaded the DOM elements you are trying to access in the JavaScript. – Danny Delott Jun 16 '15 at 16:53
Well, I tried that and it still didn't work. It also broke something else – Levi Meredith Jun 16 '15 at 16:53

score 0 · Accepted Answer · answered Jun 16 '15 at 17:25

0

Is your script in a tag? Also is the document loaded when you attempt this? What does the console says? Is it working with no css? Also if photo path doesnt work there is no other content in the div did you try outputting something else?

answered Jun 16 '15 at 17:25

Yann Poiré

134
6

I looked at the console and there was a couple errors. In the javascript located at the top of the page there was a misplaced "}" and in the bottom javascript the variable "user" was not defined (I thought variables in the top piece of javascript would parse along to the bottom bit. – Levi Meredith Jun 16 '15 at 17:31
You are welcome! You can also use the console to output errors or to view the content of variables etc. using console.log(); Very useful tool. Check this Stackoverflow page for more about it. http://stackoverflow.com/questions/4539253/what-is-console-log – Yann Poiré Jun 17 '15 at 08:16

Creating and showing div's with javascript

2 Answers2