未捕獲的TypeError：無法將屬性'innerHTML'設置為null

Question

未捕獲的Typeerror：無法將屬性innerHTML設置為null未捕獲的Typeerror：無法將屬性innerHTML設置為null Uncaught Typeerror：不能將屬性innerHTML設置為null Uncaught Typeerror：不能將屬性innerHTML設置為null Uncaught Typeerror：無法將屬性innerHTML設置為null

 (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--> 

Answer 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="lista-productos">
</div>

改成

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

Answer 2

不要使用.innherHTML ，而只是更新變量。

.innerHTML將在DOM中的元素上使用，但是，您正在使用它的變量只是一個字符串，因此它找不到您所引用的元素，因為它只能看到一個空字符串。 有關.innerHTML更多信息，您可以在此處查看 。

更改：

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/>';
}