title: Uncaught TypeError: Cannot set property 'innerHTML' of null
body: <p>Uncaught Typeerror: Cannot set property innerHTML of null
  Uncaught Typeerror: Cannot set property innerHTML of null
  Uncaught Typeerror: Cannot set property innerHTML of null
  Uncaught Typeerror: Cannot set property innerHTML of null
  Uncaught Typeerror: Cannot set property innerHTML of null</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function(){
      "use strict";
      
      var regalo = document.getElementById('regalo');
      
      document.addEventListener('DOMContentLoaded', function(){
          
          
     //campos de usuario
          var nombres = document.getElementById(nombre);   
          var apellido = document.getElementById('apellido');   
          var email = document.getElementById('email');   
          
          
          
      //campos pases
          
          var pase_dia = document.getElementById('pase_dia');
          var pase_completo = document.getElementById('pase_completo');
          var pase_dosdias = document.getElementById('pase_dosdias');
          
          
      //botones y divs
          
          
          var calcular = document.getElementById('calcular');        
          var errorDiv = document.getElementById('error');        
          var botonRegistro = document.getElementById('btnregistro');        
          var lista_productos = document.getElementById('lista-productoss');     
          
          
          
      //extras
          
          var camisas = document.getElementById('camisa_evento');
          var etiquetas = document.getElementById('etiquetas');
          
         
          calcular.addEventListener('click', calcularMontos);
          
          function calcularMontos(event){
              event.preventDefault();
              if(regalo.value === ''){
                  alert("Debes elegir un regalo");
                  regalo.focus();
              }else {
                  var boletosDia = pase_dia.value,
                      boletosdosDias = pase_dosdias.value,
                      boletoCompleto = pase_completo.value,
                      cantCamisas = camisas.value,
                      cantEtiquetas = etiquetas.value;
                  
                  var totalPagar = (boletosDia * 30) + (boletosdosDias * 45) + (boletoCompleto * 50) + ((cantCamisas * 10)*.93) + (cantEtiquetas * 2) ;
                  
                  var listadoProductos = [];
                  
                  if (boletosDia &gt;= 1 ){
                      listadoProductos.push(boletosDia + ' Pases por Dia');
                  }
                  
                   if (boletosdosDias &gt;= 1 ){
                      listadoProductos.push(boletosdosDias + ' Pases por 2  Dias');
                  }
                  
                   if (boletoCompleto &gt;= 1 ){
                      listadoProductos.push(boletoCompleto + ' Pases Completos');
                  }
                  
                  if (cantCamisas &gt;= 1 ){
                      listadoProductos.push(cantCamisas + ' Camisas');
                  }
                  
                  if (cantEtiquetas &gt;= 1 ){
                      listadoProductos.push(cantEtiquetas + ' Etiquetas');
                  }
                  
                 
                  
                  lista_productos.innerHTML= '';
                  
                  for (var i = 0; i&lt; listadoProductos.length; i++ ){
                      lista_productos.innerHTML += listadoProductos[i] + '&lt;br/&gt;';
                  }
              }
              
          }
          
      });//DOM CONTENT LOADED
  })();</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function(){
      "use strict";
      
      var regalo = document.getElementById('regalo');
      
      document.addEventListener('DOMContentLoaded', function(){
          
          
     //campos de usuario
          var nombres = document.getElementById(nombre);   
          var apellido = document.getElementById('apellido');   
          var email = document.getElementById('email');   
          
          
          
      //campos pases
          
          var pase_dia = document.getElementById('pase_dia');
          var pase_completo = document.getElementById('pase_completo');
          var pase_dosdias = document.getElementById('pase_dosdias');
          
          
      //botones y divs
          
          
          var calcular = document.getElementById('calcular');        
          var errorDiv = document.getElementById('error');        
          var botonRegistro = document.getElementById('btnregistro');        
          var lista_productos = document.getElementById('lista-productoss');     
          
          
          
      //extras
          
          var camisas = document.getElementById('camisa_evento');
          var etiquetas = document.getElementById('etiquetas');
          
         
          calcular.addEventListener('click', calcularMontos);
          
          function calcularMontos(event){
              event.preventDefault();
              if(regalo.value === ''){
                  alert("Debes elegir un regalo");
                  regalo.focus();
              }else {
                  var boletosDia = pase_dia.value,
                      boletosdosDias = pase_dosdias.value,
                      boletoCompleto = pase_completo.value,
                      cantCamisas = camisas.value,
                      cantEtiquetas = etiquetas.value;
                  
                  var totalPagar = (boletosDia * 30) + (boletosdosDias * 45) + (boletoCompleto * 50) + ((cantCamisas * 10)*.93) + (cantEtiquetas * 2) ;
                  
                  var listadoProductos = [];
                  
                  if (boletosDia &gt;= 1 ){
                      listadoProductos.push(boletosDia + ' Pases por Dia');
                  }
                  
                   if (boletosdosDias &gt;= 1 ){
                      listadoProductos.push(boletosdosDias + ' Pases por 2  Dias');
                  }
                  
                   if (boletoCompleto &gt;= 1 ){
                      listadoProductos.push(boletoCompleto + ' Pases Completos');
                  }
                  
                  if (cantCamisas &gt;= 1 ){
                      listadoProductos.push(cantCamisas + ' Camisas');
                  }
                  
                  if (cantEtiquetas &gt;= 1 ){
                      listadoProductos.push(cantEtiquetas + ' Etiquetas');
                  }
                  
                 
                  
                  lista_productos.innerHTML= '';
                  
                  for (var i = 0; i&lt; listadoProductos.length; i++ ){
                      lista_productos.innerHTML += listadoProductos[i] + '&lt;br/&gt;';
                  }
              }
              
          }
          
      });//DOM CONTENT LOADED
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="seccion contenedor"&gt;
          &lt;h2&gt;Registro de usuarios&lt;/h2&gt;
          &lt;form action="#" method="post" id="registro" class="registro"&gt;
              &lt;div id="datos-usuarios" class="registro caja clearfix"&gt;
                  &lt;div class="campo"&gt;
                      &lt;label for="nombre"&gt;Nombre&lt;/label&gt;
                      &lt;input type="text" id="nombre" name="nombre" placeholder="Tu Nombre"&gt;
                  &lt;/div&gt;
  
                  &lt;div class="campo"&gt;
                      &lt;label for="apellido"&gt;Apellido&lt;/label&gt;
                      &lt;input type="text" id="apellido" name="apellido" placeholder="Tu Apellido"&gt;
                  &lt;/div&gt;
                  &lt;div class="campo"&gt;
                      &lt;label for="email"&gt;Email&lt;/label&gt;
                      &lt;input type="text" id="email" name="email" placeholder="Tu Email"&gt;
                  &lt;/div&gt;
                  &lt;div id="error"&gt;
                  
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;!--#Datos-usuarios--&gt;
  
              &lt;div id="paquetes" class="paquetes"&gt;
                  &lt;h3&gt;Elige el numero de boletos&lt;/h3&gt;
  
                  &lt;ul class="lista-precios clearfix"&gt;
                      &lt;li&gt;
                          &lt;div class="tabla-precio"&gt;
                              &lt;h3&gt;Pase por dia (viernes)&lt;/h3&gt;
                              &lt;p class="numero"&gt;$30&lt;/p&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;Bocadillos gratis&lt;/li&gt;
                                  &lt;li&gt;Todas las conferencias&lt;/li&gt;
                                  &lt;li&gt;Todos los talleres&lt;/li&gt;
                              &lt;/ul&gt;
  
                              &lt;div class="orden"&gt;
                                  &lt;label for="pase-dia"&gt;Boletos deseados:&lt;/label&gt;
                                  &lt;input type="number" min="0" id="pase_dia" sixe="3" placeholder="0"&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div class="tabla-precio"&gt;
                              &lt;h3&gt;Todos los Dias&lt;/h3&gt;
                              &lt;p class="numero"&gt;$50&lt;/p&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;Bocadillos gratis&lt;/li&gt;
                                  &lt;li&gt;Todas las conferencias&lt;/li&gt;
                                  &lt;li&gt;Todos los talleres&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;div class="orden"&gt;
                                  &lt;label for="pase-completo"&gt;Boletos deseados:&lt;/label&gt;
                                  &lt;input type="number" min="0" id="pase_completo" sixe="3" placeholder="0"&gt;
                              &lt;/div&gt;
  
                          &lt;/div&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;div class="tabla-precio"&gt;
                              &lt;h3&gt;Pase por 2 dias (viernes y sabado)&lt;/h3&gt;
                              &lt;p class="numero"&gt;$45&lt;/p&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;Bocadillos gratis&lt;/li&gt;
                                  &lt;li&gt;Todas las conferencias&lt;/li&gt;
                                  &lt;li&gt;Todos los talleres&lt;/li&gt;
                              &lt;/ul&gt;
                              &lt;label for="pase-dosdias"&gt;Boletos deseados:&lt;/label&gt;
                              &lt;input type="number" min="0" id="pase_dosdias" sixe="3" placeholder="0"&gt;
  
                          &lt;/div&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;!--#paquetes--&gt;
              
              
              
              &lt;div id="resumen" class="resumen"&gt;
                 &lt;h3&gt;pago y extras&lt;/h3&gt;
                  &lt;div class="caja clearfix"&gt;
                      &lt;div class="extras"&gt;
                         
                          &lt;div class="orden"&gt;
                              &lt;label for="camisa_evento"&gt;Camisa del evento $10 &lt;small&gt;(promoción 7% de dto.)&lt;/small&gt;&lt;/label&gt;
                              &lt;input type="number" min="0" id="camisa_evento" size="3" placeholder="0"&gt;
                          &lt;/div&gt;&lt;!--.orden--&gt; 
                          
                          &lt;div class="orden"&gt;
                              &lt;label for="etiquetas"&gt;paquete de 10 etiquetas $2 &lt;small&gt;(HTML5, CSS3, JavaScript, Chrome)&lt;/small&gt;&lt;/label&gt;
                              &lt;input type="number" min="0" id="etiquetas" size="3" placeholder="0"&gt;
                          &lt;/div&gt;&lt;!--.orden--&gt;
                          
                          &lt;div class="orden"&gt;
                             &lt;label for="regalo"&gt;seleccione un regalo&lt;/label&gt;&lt;br&gt;
                             &lt;select id="regalo" required&gt;
                                 &lt;option value=""&gt;-- Seleccione un regalo --&lt;/option&gt;
                                 &lt;option value="ETI"&gt;Etiquetas&lt;/option&gt;
                                 &lt;option value="PUL"&gt;Pulseras&lt;/option&gt;
                                 &lt;option value="PLU"&gt;Plumas&lt;/option&gt;
                             &lt;/select&gt;
                              
                          &lt;/div&gt;&lt;!--.orden--&gt;
                          
                          &lt;input type="button" id="calcular" class="boton" value="calcular"&gt;
                          
                      &lt;/div&gt;&lt;!--.extras--&gt;
                      
                      &lt;div class="total"&gt;
                          &lt;p&gt;Resumen&lt;/p&gt;
                          &lt;div class="lista-productos"&gt;
                              
                          &lt;/div&gt;
                          &lt;p&gt;Total&lt;/p&gt;
                          &lt;div id="suma-total"&gt;
                              
                          &lt;/div&gt;
                          &lt;input type="submit" id="btnregistro" class="boton" value="Pagar"&gt;
                      &lt;/div&gt;&lt;!--.Total--&gt;
                  &lt;/div&gt;&lt;!--.Caja--&gt;
              &lt;/div&gt;&lt;!--.Resumen--&gt;</code></pre>
  </div>
  </div>
  </p>