Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Ashish Mehra
Ashish Mehra
Courses Plus Student 103 Points

why my code is not working properly ?

hey here in this code the code is not set the class .btn_pos to div which i indicate with #1 comment 

var submit = document.getElementsByTagName('button')[0];
var userpost = document.getElementById('user_post');
var display = document.getElementById('compile');

//Function for creating elements
var myprofile = function(post){
    console.log("now i m here");
    //creating elements
     // var createDiv = document.createElement("div"); //div creations which contain class display
      var createDiv = document.createElement("div");
      var heading = document.createElement("h1");
      var para = document.createElement("p");
      var createBtn = document.createElement("div");  // #1
      var button = document.createElement("button");
      var button_1 = document.createElement("button");
    //modifing elements
      createDiv.className = "display group";
       heading.innerText = "WALL POST";
       para.innerText = post;
       para.className = "box";
       createBtn.className = "btn_pos group";  // #1
       button.innerText = "EDIT";
       button.className= "btn";
       button_1.innerText = "DELETE";
       button_1.className = "btn";

    //appending child
    createDiv.appendChild(heading);
    createDiv.appendChild(para);
    createDiv.appendChild(createBtn);
    createDiv.appendChild(button);
    createDiv.appendChild(button_1);
     return createDiv;

}
//Function through which we can call other functions  
var process = function(){
    console.log("i reach here");
  //here we're going to create an elements which is responsible to create div
  var execute =  myprofile(userpost.value);
   display.appendChild(execute);

} 
submit.onclick = process;

.btn_pos{
    float: right;
}

.group:after{
    display: table;
    content: "";
    clear: both;
}
Jarrad O'Brien
Jarrad O'Brien
8,136 Points

I'm pretty sure you can't add more than one class name using '.className'. Try this instead:

createBtn.classList.add("btn_pos", "group");

You can learn more about classList from here at MDN.

1 Answer

Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

Actually, the class names do get set on the DIV as is. But perhaps you didn't realize you are setting those classes on an empty DIV, so the effects are not visible.

Did you mean to put something, like the buttons, INSIDE that DIV? Like this:

    //appending child
    createDiv.appendChild(heading);
    createDiv.appendChild(para);
    createBtn.appendChild(button);    // Note: buttons going INSIDE of createBtn
    createBtn.appendChild(button_1);
    createDiv.appendChild(createBtn);