2017-05-25 30 views
-1

キャッチされない例外TypeErrorのプロパティ「innerHTMLプロパティ」を設定することはできません:ヌル キャッチされない例外TypeErrorのプロパティinnerHTMLプロパティを設定できません:ヌル キャッチされない例外TypeErrorのプロパティinnerHTMLプロパティを設定できません:ヌル キャッチされない例外TypeErrorのプロパティinnerHTMLプロパティを設定できません:プロパティを設定できませんヌル キャッチされない例外TypeErrorのinnerHTMLプロパティ:ヌルキャッチされない例外TypeErrorは:ヌル

(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 >= 1){ 
 
        listadoProductos.push(boletosDia + ' Pases por Dia'); 
 
       } 
 
       
 
       if (boletosdosDias >= 1){ 
 
        listadoProductos.push(boletosdosDias + ' Pases por 2 Dias'); 
 
       } 
 
       
 
       if (boletoCompleto >= 1){ 
 
        listadoProductos.push(boletoCompleto + ' Pases Completos'); 
 
       } 
 
       
 
       if (cantCamisas >= 1){ 
 
        listadoProductos.push(cantCamisas + ' Camisas'); 
 
       } 
 
       
 
       if (cantEtiquetas >= 1){ 
 
        listadoProductos.push(cantEtiquetas + ' Etiquetas'); 
 
       } 
 
       
 
       
 
       
 
       lista_productos.innerHTML= ''; 
 
       
 
       for (var i = 0; i< listadoProductos.length; i++){ 
 
        lista_productos.innerHTML += listadoProductos[i] + '<br/>'; 
 
       } 
 
      } 
 
      
 
     } 
 
     
 
    });//DOM CONTENT LOADED 
 
})();

(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 >= 1){ 
 
        listadoProductos.push(boletosDia + ' Pases por Dia'); 
 
       } 
 
       
 
       if (boletosdosDias >= 1){ 
 
        listadoProductos.push(boletosdosDias + ' Pases por 2 Dias'); 
 
       } 
 
       
 
       if (boletoCompleto >= 1){ 
 
        listadoProductos.push(boletoCompleto + ' Pases Completos'); 
 
       } 
 
       
 
       if (cantCamisas >= 1){ 
 
        listadoProductos.push(cantCamisas + ' Camisas'); 
 
       } 
 
       
 
       if (cantEtiquetas >= 1){ 
 
        listadoProductos.push(cantEtiquetas + ' Etiquetas'); 
 
       } 
 
       
 
       
 
       
 
       lista_productos.innerHTML= ''; 
 
       
 
       for (var i = 0; i< listadoProductos.length; i++){ 
 
        lista_productos.innerHTML += listadoProductos[i] + '<br/>'; 
 
       } 
 
      } 
 
      
 
     } 
 
     
 
    });//DOM CONTENT LOADED 
 
})();
<section class="seccion contenedor"> 
 
     <h2>Registro de usuarios</h2> 
 
     <form action="#" method="post" id="registro" class="registro"> 
 
      <div id="datos-usuarios" class="registro caja clearfix"> 
 
       <div class="campo"> 
 
        <label for="nombre">Nombre</label> 
 
        <input type="text" id="nombre" name="nombre" placeholder="Tu Nombre"> 
 
       </div> 
 

 
       <div class="campo"> 
 
        <label for="apellido">Apellido</label> 
 
        <input type="text" id="apellido" name="apellido" placeholder="Tu Apellido"> 
 
       </div> 
 
       <div class="campo"> 
 
        <label for="email">Email</label> 
 
        <input type="text" id="email" name="email" placeholder="Tu Email"> 
 
       </div> 
 
       <div id="error"> 
 
       
 
       </div> 
 
      </div> 
 
      <!--#Datos-usuarios--> 
 

 
      <div id="paquetes" class="paquetes"> 
 
       <h3>Elige el numero de boletos</h3> 
 

 
       <ul class="lista-precios clearfix"> 
 
        <li> 
 
         <div class="tabla-precio"> 
 
          <h3>Pase por dia (viernes)</h3> 
 
          <p class="numero">$30</p> 
 
          <ul> 
 
           <li>Bocadillos gratis</li> 
 
           <li>Todas las conferencias</li> 
 
           <li>Todos los talleres</li> 
 
          </ul> 
 

 
          <div class="orden"> 
 
           <label for="pase-dia">Boletos deseados:</label> 
 
           <input type="number" min="0" id="pase_dia" sixe="3" placeholder="0"> 
 
          </div> 
 

 
         </div> 
 
        </li> 
 
        <li> 
 
         <div class="tabla-precio"> 
 
          <h3>Todos los Dias</h3> 
 
          <p class="numero">$50</p> 
 
          <ul> 
 
           <li>Bocadillos gratis</li> 
 
           <li>Todas las conferencias</li> 
 
           <li>Todos los talleres</li> 
 
          </ul> 
 
          <div class="orden"> 
 
           <label for="pase-completo">Boletos deseados:</label> 
 
           <input type="number" min="0" id="pase_completo" sixe="3" placeholder="0"> 
 
          </div> 
 

 
         </div> 
 
        </li> 
 
        <li> 
 
         <div class="tabla-precio"> 
 
          <h3>Pase por 2 dias (viernes y sabado)</h3> 
 
          <p class="numero">$45</p> 
 
          <ul> 
 
           <li>Bocadillos gratis</li> 
 
           <li>Todas las conferencias</li> 
 
           <li>Todos los talleres</li> 
 
          </ul> 
 
          <label for="pase-dosdias">Boletos deseados:</label> 
 
          <input type="number" min="0" id="pase_dosdias" sixe="3" placeholder="0"> 
 

 
         </div> 
 
        </li> 
 
       </ul> 
 
      </div> 
 
      <!--#paquetes--> 
 
      
 
      
 
      
 
      <div id="resumen" class="resumen"> 
 
       <h3>pago y extras</h3> 
 
       <div class="caja clearfix"> 
 
        <div class="extras"> 
 
         
 
         <div class="orden"> 
 
          <label for="camisa_evento">Camisa del evento $10 <small>(promoción 7% de dto.)</small></label> 
 
          <input type="number" min="0" id="camisa_evento" size="3" placeholder="0"> 
 
         </div><!--.orden--> 
 
         
 
         <div class="orden"> 
 
          <label for="etiquetas">paquete de 10 etiquetas $2 <small>(HTML5, CSS3, JavaScript, Chrome)</small></label> 
 
          <input type="number" min="0" id="etiquetas" size="3" placeholder="0"> 
 
         </div><!--.orden--> 
 
         
 
         <div class="orden"> 
 
          <label for="regalo">seleccione un regalo</label><br> 
 
          <select id="regalo" required> 
 
           <option value="">-- Seleccione un regalo --</option> 
 
           <option value="ETI">Etiquetas</option> 
 
           <option value="PUL">Pulseras</option> 
 
           <option value="PLU">Plumas</option> 
 
          </select> 
 
          
 
         </div><!--.orden--> 
 
         
 
         <input type="button" id="calcular" class="boton" value="calcular"> 
 
         
 
        </div><!--.extras--> 
 
        
 
        <div class="total"> 
 
         <p>Resumen</p> 
 
         <div class="lista-productos"> 
 
          
 
         </div> 
 
         <p>Total</p> 
 
         <div id="suma-total"> 
 
          
 
         </div> 
 
         <input type="submit" id="btnregistro" class="boton" value="Pagar"> 
 
        </div><!--.Total--> 
 
       </div><!--.Caja--> 
 
      </div><!--.Resumen-->
0123のプロパティinnerHTMLプロパティを設定できません

+0

変更 'のvar lista_productos =のdocument.getElementById( 'リスタ-productoss');' 'VARのlista_productos =のdocument.getElementById( 'lista-にproductos '); ' – Lixus

答えて

0

.innherHTMLを使用しないで、代わりに変数を更新してください。

.innerHTMLはDOMの要素で使用されますが、使用している変数は文字列であるため、空の文字列しか表示されないため、参照している要素を見つけることができません。 .innerHTMLの詳細については、hereをご覧ください。

変更:

lista_productos.innerHTML= ''; 
for (var i = 0; i< listadoProductos.length; i++){ 
    lista_productos.innerHTML += listadoProductos[i] + '<br/>'; 
} 

:を

lista_productos = ''; 
for (var i = 0; i< listadoProductos.length; i++){ 
    lista_productos += listadoProductos[i] + '<br/>'; 
} 
+0

私は結果をHTMLで印刷する必要があります – jefferson

1

あなたはタイプミスがあります。余分なS Tienes un errortipográfico。アン余分な "S"

var lista_productos = document.getElementById('lista-productoss');

は次のようになります。 debieraのSER:

var lista_productos = document.getElementById('lista-productos');

また、あなたのHTMLは

<div class="lista-productos"> 
</div> 
...これはCLASSのリスタ・PRODUCTOSとしてDIV定義します

<div id="lista-productos"> 
</div> 
+0

私はそれを訂正しましたが、それでも私はまだ79行目にエラーを残しています: lista_productos.innerHTML =' '; – jefferson

+0

ありがとうございましたあなたは非常に参考になった、あなたが言ったようにそれを解決する – jefferson

関連する問題