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

Young Choe
seal-mask
.a{fill-rule:evenodd;}techdegree
Young Choe
Python Web Development Techdegree Student 6,259 Points

Buttons are not showing up with the CSS style properties

const studentList = document.querySelector('.student-list');
const student = document.getElementsByTagName('ul')[0];
const addSearchInput = document.createElement('input');
const li = studentList.children;
const page = document.querySelector('.page');
const buttonOne = document.createElement('button');
const buttonTwo = document.createElement('button');
const buttonThree = document.createElement('button');
const buttonFour = document.createElement('button');
const buttonFive = document.createElement('button');
const buttonSix = document.createElement('button');



buttonOne.textContent = "1";
buttonTwo.textContent = "2";
buttonThree.textContent = "3";
buttonFour.textContent = "4";
buttonFive.textContent = "5";
buttonSix.textContent = "6";




buttonOne.className = "pagination";
buttonTwo.className = "pagination";
buttonThree.className = "pagination";
buttonFour.className = "pagination";
buttonFive.className = "pagination";
buttonSix.className = "pagination";



page.appendChild(buttonOne);
page.appendChild(buttonTwo);
page.appendChild(buttonThree);
page.appendChild(buttonFour);
page.appendChild(buttonFive);
page.appendChild(buttonSix);

This is my code for the JS file, and then here is the code for the CSS file for the pagination class.

.pagination{
  margin: 40px 0 0 0;
  text-align: center;
}

  .pagination li{
    display: inline;
  }

    .pagination li a{
      border: 1px solid #eaeaea;
      border-radius: 5px;
      padding: 3px 8px;
      text-decoration: none;
      color: #4ba6c3;
    }

    .pagination li a.active,
    .pagination li a:hover{
      background-color: #4ba6c3;
      color: #fff;
    }

And then this is the index.html file

<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Students</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/design.css">
</head>

<body>
    <div class="page">
        <div class="page-header cf">
            <h2>Students</h2>
            <!-- dynamically insert search form here (optional) -->

        </div>
        <ul class="student-list">
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg">
                    <h3>iboya vat</h3>
                    <span class="email">iboya.vat@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 07/15/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
                    <h3>aapo niskanen</h3>
                    <span class="email">aapo.niskanen@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/15/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
                    <h3>phillip cox</h3>
                    <span class="email">phillip.cox@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 09/11/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/38.jpg">
                    <h3>zilda moreira</h3>
                    <span class="email">zilda.moreira@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 07/15/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/23.jpg">
                    <h3>lilou le gall</h3>
                    <span class="email">lilou.le gall@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/16/13</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg">
                    <h3>lucy hall</h3>
                    <span class="email">lucy.hall@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 09/11/16</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg">
                    <h3>mark colin</h3>
                    <span class="email">mark.colin@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 01/14/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/14.jpg">
                    <h3>sara alves</h3>
                    <span class="email">sara.alves@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 07/19/16</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
                    <h3>ramon macrae</h3>
                    <span class="email">ramon.macrae@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 05/13/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/15.jpg">
                    <h3>connor taylor</h3>
                    <span class="email">connor.taylor@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 05/18/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/11.jpg">
                    <h3>aymeric morel</h3>
                    <span class="email">aymeric.morel@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/13/13</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
                    <h3>lorenz otto</h3>
                    <span class="email">lorenz.otto@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 05/11/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg">
                    <h3>karl williamson</h3>
                    <span class="email">karl.williamson@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 01/12/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
                    <h3>ouassim heering</h3>
                    <span class="email">ouassim.heering@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 01/18/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
                    <h3>roberto molina</h3>
                    <span class="email">roberto.molina@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/13/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/28.jpg">
                    <h3>jordan hubert</h3>
                    <span class="email">jordan.hubert@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/13/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg">
                    <h3>melvin baker</h3>
                    <span class="email">melvin.baker@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 09/18/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/26.jpg">
                    <h3>everett gordon</h3>
                    <span class="email">everett.gordon@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/17/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/82.jpg">
                    <h3>aiden ma</h3>
                    <span class="email">aiden.ma@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 07/18/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/62.jpg">
                    <h3>florent gerard</h3>
                    <span class="email">florent.gerard@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 02/12/13</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/96.jpg">
                    <h3>amber chen</h3>
                    <span class="email">amber.chen@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 07/12/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/9.jpg">
                    <h3>alexandra davies</h3>
                    <span class="email">alexandra.davies@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 05/11/13</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/57.jpg">
                    <h3>sergio cole</h3>
                    <span class="email">sergio.cole@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 02/17/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/98.jpg">
                    <h3>edgar dixon</h3>
                    <span class="email">edgar.dixon@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/17/11</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/94.jpg">
                    <h3>kirk myers</h3>
                    <span class="email">kirk.myers@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 09/17/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/28.jpg">
                    <h3>ani hesseling</h3>
                    <span class="email">ani.hesseling@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 08/14/16</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg">
                    <h3>victoire bonnet</h3>
                    <span class="email">victoire.bonnet@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 05/13/16</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/44.jpg">
                    <h3>marcos morales</h3>
                    <span class="email">marcos.morales@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 01/12/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
                    <h3>nils neumann</h3>
                    <span class="email">nils.neumann@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 03/11/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/86.jpg">
                    <h3>emily harrison</h3>
                    <span class="email">emily.harrison@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 07/18/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
                    <h3>matthew fortin</h3>
                    <span class="email">matthew.fortin@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 03/18/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/32.jpg">
                    <h3>charlotte steward</h3>
                    <span class="email">charlotte.steward@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 02/18/11</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg">
                    <h3>marceau rodriguez</h3>
                    <span class="email">marceau.rodriguez@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 07/13/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
                    <h3>hudson anderson</h3>
                    <span class="email">hudson.anderson@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 09/12/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/33.jpg">
                    <h3>warren phillips</h3>
                    <span class="email">warren.phillips@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 01/11/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
                    <h3>leo niva</h3>
                    <span class="email">leo.niva@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 09/14/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg">
                    <h3>hani prevoo</h3>
                    <span class="email">hani.prevoo@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 01/11/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/79.jpg">
                    <h3>veronica rodriguez</h3>
                    <span class="email">veronica.rodriguez@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 07/17/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
                    <h3>ginestal das neves</h3>
                    <span class="email">ginestal.das neves@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/19/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg">
                    <h3>devon barnes</h3>
                    <span class="email">devon.barnes@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 09/19/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/55.jpg">
                    <h3>brennan pierce</h3>
                    <span class="email">brennan.pierce@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 05/15/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg">
                    <h3>zachary singh</h3>
                    <span class="email">zachary.singh@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 05/19/11</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg">
                    <h3>arlo harris</h3>
                    <span class="email">arlo.harris@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 07/12/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/60.jpg">
                    <h3>hannah ginnish</h3>
                    <span class="email">hannah.ginnish@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 05/17/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/95.jpg">
                    <h3>goos brunt</h3>
                    <span class="email">goos.brunt@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 09/15/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
                    <h3>eduard riedel</h3>
                    <span class="email">eduard.riedel@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/12/15</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/42.jpg">
                    <h3>geesken jekel</h3>
                    <span class="email">geesken.jekel@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 02/12/13</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/54.jpg">
                    <h3>dolores ryan</h3>
                    <span class="email">dolores.ryan@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/17/16</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
                    <h3>steven rogers</h3>
                    <span class="email">steven.rogers@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 01/18/11</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg">
                    <h3>virgulino silva</h3>
                    <span class="email">virgulino.silva@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 03/18/11</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/11.jpg">
                    <h3>lucile bertrand</h3>
                    <span class="email">lucile.bertrand@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 06/13/16</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/10.jpg">
                    <h3>elsa lahti</h3>
                    <span class="email">elsa.lahti@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 04/15/12</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/12.jpg">
                    <h3>soline leclercq</h3>
                    <span class="email">soline.leclercq@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 05/12/14</span>
                </div>
            </li>
            <li class="student-item cf">
                <div class="student-details">
                    <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/89.jpg">
                    <h3>henri kruse</h3>
                    <span class="email">henri.kruse@example.com</span>
                </div>
                <div class="joined-details">
                    <span class="date">Joined 05/14/13</span>
                </div>
            </li>
        </ul>
        <!-- dynamically add pagination links here -->
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/project-two.js"></script>
    </div>
</body>

</html>

When I look at my file on the browser the buttons show up on the page, but they do not have the css properties attached them, and I do believe the pagination part of the css file is what the button's css properties are supposed to be. If my question still doesn't make sense, please let me know! Thanks!

2 Answers

Steven Parker
Steven Parker
231,007 Points

The CSS rule that applies to the buttons with class "pagination" only sets margin and text-align. It appears to be working.

The other CSS rules use descendant selectors intended for nested list items and anchor elements, and they appear to have no qualifying targets on the page.

When sharing such massive code, it would be much better to make a snapshot of your workspace and post the link to it here.

Young Choe
seal-mask
.a{fill-rule:evenodd;}techdegree
Young Choe
Python Web Development Techdegree Student 6,259 Points

Ah ok I see, so I would have to create an anchor element and list items to go along with my page buttons? I already have my page button variables set with the button HTML element.

Steven Parker
Steven Parker
231,007 Points

If your intention is to style the buttons, I would think the best approach would be to change the CSS to select the buttons directly.

Young Choe
seal-mask
.a{fill-rule:evenodd;}techdegree
Young Choe
Python Web Development Techdegree Student 6,259 Points

https://teamtreehouse.com/workspaces/37968672

In this workspace I created, I changed the CSS to select the buttons directly by removing the Anchor and List HTML tags it was selecting, but in the browser the buttons don't have a white background and instead have a white background also they are aligned towards the left of the page and not to the bottom center. Would I have to just add those css properties into the css file or is there something I am doing wrong?

Steven Parker
Steven Parker
231,007 Points

You can't share a direct URL to your workspace, it's temporary and only exists while you are using it.
But you can use the snapshot function in the workspace and provide the link to that.

Young Choe
seal-mask
.a{fill-rule:evenodd;}techdegree
Young Choe
Python Web Development Techdegree Student 6,259 Points

Ok sorry about that, I actually restarted my whole project, but I just asked another question about another problem I was having, and posted the snapshot there. Thank you!

Steven Parker
Steven Parker
231,007 Points

If you're referring to the question I also answered, the CSS included in the snapshot did not reflect the changes you describe making here, and the JavaScript component was not present in the snapshot at all.