1

Estoy creando una paginacion solo con JavaScript sin usar Jquery pero quiero inserar los botones de la paginacion dependiendo de la cantidad de elementos y la cantidad de elementos por pagina, el innerHTML de la linea 34 no inserta los botones en la pagina si reviso el valor de divButtons por consola esta correcto pero no aparce en la pagina.

// Global Variables
var itemsPerPage = 10;
var list = document.getElementsByClassName('student-list');
var items = document.getElementsByClassName('student-item');
var actualPage = 1;
var divButtons = document.getElementsByClassName("pagination");
var index;
var message;

// Count the numbrer of items in the list
var getNumberOfItems = function () {
  var numbrerOfItems = items.length;
  return (numbrerOfItems);
}
// Generating rhe number of pages
var getNumberOfPages = function () {
  var numberOfPages = parseInt(getNumberOfItems() / itemsPerPage);
  if ( getNumberOfItems() % itemsPerPage > 0 ){
    numberOfPages += 1;
  }
  return numberOfPages;
}
// add the navigations buttons
var addButtons = function (activePage) {
  message = "<ul>";
  for (var i = 0; i < getNumberOfPages(); i++) {
      message += "<li><a ";
      if(activePage === (i +1)){
        message += "class = 'active' ";
      }
      message += "href='#' onclick = 'changePage(" + (i + 1) + ")'>" + ( i +1 ) + "</a></li>";
  }
  message += "</ul>";
  divButtons.innerHTML(message);
}

var hideItems = function () {
  for (var i = 0; i < getNumberOfItems(); i++) {
    items[i].style.display = "none";

  }

}

function showItemsByPage (page) {
  for (var i = 0; i <= itemsPerPage - 1; i++) {
    index = page * itemsPerPage - itemsPerPage  + i;
    items[index].style.display = "block";
  }
}

function changePage (number) {
  document.addEventListener( "DOMContentLoaded", hideItems());
  document.addEventListener( "DOMContentLoaded", showItemsByPage(number));
  document.addEventListener( "DOMContentLoaded", addButtons(number));
}

changePage(1);
body{
  background-color: #e1f1f6;
  font-family: Helvetica, sans-serif;
  color: #222;
}

.page{
  margin: 50px auto;
  width: 70%;
  background-color: #fff;
  border-radius: 5px;
  padding: 50px;
}

.page-header{
  margin-bottom: 20px;
}
  .page-header h2{
    float: left;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: bold;
    color: #555;
  }

  .page-header .student-search{
    float: right;
  }

    .page-header .student-search input{
      border-radius: 5px;
      border: 1px solid #eaeaea;
      padding: 8px 15px;
      font-size: 14px;
    }

    .page-header .student-search button{
      border-radius: 5px;
      border: 1px solid #eaeaea;
      padding: 8px 15px;
      font-size: 14px;
      background-color: #4ba6c3;
      color: #fff
    }

.student-list{}

  .student-item{
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #eaeaea;
  }

    .student-details{
      width: 50%;
      float: left;
    }

      .student-details .avatar{
        width: 40px;
        height: auto;
        border-radius: 20px;
        float: left;
        margin-right: 14px
      }

      .student-details h3{
        margin: 4px 0 2px 0;
        font-weight: bold;
        color: #4ba6c3;
      }

      .student-details .email{
        color: #888;
        font-size: 14px;
      }


    .joined-details{
      width: 50%;
      float: left;
      text-align: right;
    }

      .joined-details .date{
        margin-top: 15px;
        display: block;
        font-size: 14px;
        color: #999;
      }

  .student-item:last-child{
    margin: 0;
    padding: 0;
    border-bottom: none;
  }

.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;
    }
.hidenItems{
  display: none;
}
.showItems{
  display: block;
}
<!doctype html>
<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>
      </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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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 [email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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 [email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/18/11</span>
           </div>
        </li>
      </ul>
      <div class="pagination">

      </div>
    </div>

    <script type="text/javascript" src= "js/scripts.js">

    </script>
  </body>
</html>

1 respuesta 1

0

Al ejeecutar tu propio código en la pregunta, puedo ver en la consola:

Uncaught TypeError: divButtons.innerHTML is not a function

Eso ocurre porque estás llamando a innerHTML como si fuera una función, cuando lo que tienes que hacer es asignarlo como una propiedad:

divButtons.innerHTML = message;

Además, divButtons se obtiene con getElementsByClassName por lo que es un array de elementos y no un elmeento en sí, y debes seleccionar el primero:

divButtons[0].innerHTML = message;

Y ahora ya no da ese error:

// Global Variables
var itemsPerPage = 10;
var list = document.getElementsByClassName('student-list');
var items = document.getElementsByClassName('student-item');
var actualPage = 1;
var divButtons = document.getElementsByClassName("pagination");
var index;
var message;

// Count the numbrer of items in the list
var getNumberOfItems = function () {
  var numbrerOfItems = items.length;
  return (numbrerOfItems);
}
// Generating rhe number of pages
var getNumberOfPages = function () {
  var numberOfPages = parseInt(getNumberOfItems() / itemsPerPage);
  if ( getNumberOfItems() % itemsPerPage > 0 ){
    numberOfPages += 1;
  }
  return numberOfPages;
}
// add the navigations buttons
var addButtons = function (activePage) {
  message = "<ul>";
  for (var i = 0; i < getNumberOfPages(); i++) {
      message += "<li><a ";
      if(activePage === (i +1)){
        message += "class = 'active' ";
      }
      message += "href='#' onclick = 'changePage(" + (i + 1) + ")'>" + ( i +1 ) + "</a></li>";
  }
  message += "</ul>";
  divButtons[0].innerHTML = message;
}

var hideItems = function () {
  for (var i = 0; i < getNumberOfItems(); i++) {
    items[i].style.display = "none";

  }

}

function showItemsByPage (page) {
  for (var i = 0; i <= itemsPerPage - 1; i++) {
    index = page * itemsPerPage - itemsPerPage  + i;
    items[index].style.display = "block";
  }
}

function changePage (number) {
  document.addEventListener( "DOMContentLoaded", hideItems());
  document.addEventListener( "DOMContentLoaded", showItemsByPage(number));
  document.addEventListener( "DOMContentLoaded", addButtons(number));
}

changePage(1);
body{
  background-color: #e1f1f6;
  font-family: Helvetica, sans-serif;
  color: #222;
}

.page{
  margin: 50px auto;
  width: 70%;
  background-color: #fff;
  border-radius: 5px;
  padding: 50px;
}

.page-header{
  margin-bottom: 20px;
}
  .page-header h2{
    float: left;
    font-size: 22px;
    text-transform: uppercase;
    font-weight: bold;
    color: #555;
  }

  .page-header .student-search{
    float: right;
  }

    .page-header .student-search input{
      border-radius: 5px;
      border: 1px solid #eaeaea;
      padding: 8px 15px;
      font-size: 14px;
    }

    .page-header .student-search button{
      border-radius: 5px;
      border: 1px solid #eaeaea;
      padding: 8px 15px;
      font-size: 14px;
      background-color: #4ba6c3;
      color: #fff
    }

.student-list{}

  .student-item{
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom: 1px solid #eaeaea;
  }

    .student-details{
      width: 50%;
      float: left;
    }

      .student-details .avatar{
        width: 40px;
        height: auto;
        border-radius: 20px;
        float: left;
        margin-right: 14px
      }

      .student-details h3{
        margin: 4px 0 2px 0;
        font-weight: bold;
        color: #4ba6c3;
      }

      .student-details .email{
        color: #888;
        font-size: 14px;
      }


    .joined-details{
      width: 50%;
      float: left;
      text-align: right;
    }

      .joined-details .date{
        margin-top: 15px;
        display: block;
        font-size: 14px;
        color: #999;
      }

  .student-item:last-child{
    margin: 0;
    padding: 0;
    border-bottom: none;
  }

.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;
    }
.hidenItems{
  display: none;
}
.showItems{
  display: block;
}
<!doctype html>
<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>
      </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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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 [email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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 [email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</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">[email protected]</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/18/11</span>
           </div>
        </li>
      </ul>
      <div class="pagination">

      </div>
    </div>

    <script type="text/javascript" src= "js/scripts.js">

    </script>
  </body>
</html>

3
  • Muchas gracias porque debo colocar [0] en el divButtons solo estoy seleccionando un elemento no entiendo porque me devuelve un arrray Commented el 15 ago. 2016 a las 20:46
  • El propio nombre lo indica getElementsByClassName: un arrray de elementos, y no un único elemento como con getElementById. getElementsByClassName devuelve una lista/array de elementos, otras variables (como list o items) no dan error porque las estás utilizando dentro de un bucle (ej: items[i].style.display = "none";) si te fijas, se indica un índice que no se estaba haciendo para el caso de divButtons
    – Alvaro Montoro
    Commented el 15 ago. 2016 a las 20:54
  • Muchas gracias apenas estoy empezando en la programacion y me fue de gran utilidad tu ayuda Commented el 15 ago. 2016 a las 21:16

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.