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 Pawel Ellwart
Pawel Ellwart
12,993 Points

Can't style elements created by JS on Bootstrap

I want to add text from the input field on top to the list below but the added elements are not styled on Bootstrap, basically I want to create new elements which will look the same as those that are already on the list (the same buttons, checkbox, styling). Bootsrtap classes and code created by JS looks properly, but styling doesn't work. 

<!DOCTYPE html>
<html lang="pl">
<head>

<!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">



    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <!-- Google Fonts -->

   <link href="https://fonts.googleapis.com/css?family=Roboto|Signika" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Chivo|Comfortaa" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css?family=Gudea|Open+Sans" rel="stylesheet">
   <link rel="stylesheet"  type="text/css" href="styles.css">


<title>Page Title</title>
</head>
<body>
<div class="container-fluid h_back">
    <div class="row">
            <div class="col-lg-12 ">
                <h1 class="text-center  ">Easy ToDO</h1>
            </div>
            <div class="col-lg-2 mt-2 ">

            </div>
    </div>
</div>


<div class="container">
    <div class="row">
        <div class="col-lg-4 offset-lg-4">
            <div class="input-group input-group-sm mb-3 mt-3">
                <input type="text" class="form-control addItemInput" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" value="+ Add an Item..." id='AddItem'> 
            </div>
        </div>
        <div class="col-lg-1 offset-lg-3 mt-3">
            <img src="Icons/001-printer.png" class="mx-auto d-block">
                <p class="small text-center">Print list</p>
        </div>
    </div>
    <div class="row">
        <div class="col-lg">
            <ul class="list-group">
                <li class="list-group-item list-group-item-action">
                    <label class = "checkbox-inline">
                        <div class="input-group ">          
                            <div class="input-group-text mr-2">
                                <input type="checkbox" aria-label="Checkbox for following text input">
                            </div>
                        </div>
                    </label>

                    Shopping item 1 
                    <div class="btn-group mr-2 float-right">
                        <button type="button" class="btn btn-outline-danger btn-sm">Remove</button>
                    </div>
                    <div class="btn-group mr-2 float-right ">
                        <button type="button" class="btn btn-outline-primary btn-sm " >Down</button>
                    </div>
                    <div class="btn-group mr-2 float-right">
                        <button type="button" class="btn btn-outline-primary btn-sm">Up</button>
                    </div>
                </li>
                <li class="list-group-item list-group-item-action">
                    <label class = "checkbox-inline">
                        <div class="input-group ">  
                            <div class="input-group-text mr-2">
                                <input type="checkbox" aria-label="Checkbox for following text input">
                            </div>
                        </div>
                    </label>

                    Shopping item 1
                    <div class="btn-group mr-2 float-right">
                        <button type="button" class="btn btn-outline-danger btn-sm">Remove</button>
                    </div>
                    <div class="btn-group mr-2 float-right">
                        <button type="button" class="btn btn-outline-primary btn-sm" >Down</button>
                    </div>
                    <div class="btn-group mr-2 float-right">
                        <button type="button" class="btn btn-outline-primary btn-sm">Up</button>
                    </div>
                </li>
                <li class="list-group-item list-group-item-action">
                    <label class = "checkbox-inline">
                        <div class="input-group ">  
                            <div class="input-group-text mr-2">
                                <input type="checkbox" aria-label="Checkbox for following text input">
                            </div>
                        </div>
                    </label>

                    Shopping item 1
                    <div class="btn-group mr-2 float-right">
                        <button type="button" class="btn btn-outline-danger btn-sm">Remove</button>
                    </div>
                    <div class="btn-group mr-2 float-right ">
                        <button type="button" class="btn btn-outline-primary btn-sm" >Down</button>
                    </div>
                    <div class="btn-group mr-2 float-right">
                        <button type="button" class="btn btn-outline-primary btn-sm">Up</button>
                    </div>
                </li>
            </ul>
        </div>
    </div>

        <div class="row">
            <div class="col-lg-12 text-center mt-3">
                <button type="button" class="btn btn-danger mt-2 w-25">Clear List</button>
            </div>
        </div>

</div>

<script src='script.js'></script>
</body>
</html>

Javascript code:

var Item = document.getElementById('AddItem');




Item.addEventListener ( 'focus',  () => {

    if (Item.value == '+ Add an Item...') {

        Item.value = '';


    }




});

Item.addEventListener ('blur', () => {

     if (Item.value == '') {

        Item.value = '+ Add an Item..334.';
    }


let ul = document.getElementsByTagName('ul')[0];
    let li = document.createElement('li');
    li.className = 'list-group-item-list-group-item-action';
    let label = document.createElement('label');
    label.className = 'checkbox-inline';
    let InputDiv = document.createElement('div');
    InputDiv.className = 'input-group';
    let TextDiv = document.createElement('div');
    TextDiv.className = 'input-group-text-mr-2';
    let InputElement = document.createElement('input');
    let RemoveButton = document.createElement('div');
    RemoveButton.className = 'btn-group-mr-2-float-right';
    let Button = document.createElement('button');
    Button.className = 'btn-btn-outline-danger-btn-sm';

    li.textContent = Item.value;
    ul.appendChild(li);
    li.appendChild(label);
    label.appendChild(InputDiv);
    InputDiv.appendChild(TextDiv);
    TextDiv.appendChild(InputElement);
    InputElement.setAttribute("type", "checkbox"); 
    InputElement.setAttribute("aria-label", "Checkbox-for-following-text-input");
    li.appendChild(RemoveButton);
    RemoveButton.appendChild(Button);
    Button.setAttribute("type", "button");
    Button.textContent = "Remove";
});

2 Answers

KRIS NIKOLAISEN
KRIS NIKOLAISEN
54,974 Points

Many of the class names in your script don't match the class names in your html. Check for hyphens where there should be spaces. This fixes most of them:

let ul = document.getElementsByTagName('ul')[0];
    let li = document.createElement('li');
    li.className = 'list-group-item list-group-item-action';
    let label = document.createElement('label');
    label.className = 'checkbox-inline';
    let InputDiv = document.createElement('div');
    InputDiv.className = 'input-group ';
    let TextDiv = document.createElement('div');
    TextDiv.className = 'input-group-text mr-2';
    let InputElement = document.createElement('input');
    let RemoveButton = document.createElement('div');
    RemoveButton.className = 'btn-group mr-2 float-right';
    let Button = document.createElement('button');
    Button.className = 'btn btn-outline-danger btn-sm';
Pawel Ellwart
Pawel Ellwart
12,993 Points

Thank you Kris, it works! and I have one more question related to the place where the text from input is placed. For some reason it's placed before the checkbox and I would like to add it after the checkbox (label element), exactly like the "Shopping item 1 ".

Pawel Ellwart
Pawel Ellwart
12,993 Points
Pawel Ellwart
Pawel Ellwart
12,993 Points

I've solved it on my own and had to change the buttons and Bootstrap elements creation order.