未捕获的类型错误：无法将属性“innerHTML”设置为 null
2017-05-25
2429
未捕获的类型错误：无法设置 null 的属性 innerHTML 未捕获的类型错误：无法设置 null 的属性 innerHTML 未捕获的类型错误：无法设置 null 的属性 innerHTML 未捕获的类型错误：无法设置 null 的属性 innerHTML 未捕获的类型错误：无法设置 null 的属性 innerHTML 未捕获的类型错误：无法设置 null 的属性 innerHTML
(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-->2个回答
你有一个错字。额外的 S Tienes 错误提示。 Un extra "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>
SactoJosh
2017-05-25
不要使用
.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/>';
}
jkeys
2017-05-25