javascript函数中innerHTML的问题

时间:2015-12-14 21:50:06

标签: javascript jquery html json

我正在为我的一个类编写这段代码,我需要使用localStorage和一些JSON元素在html中生成一些代码。一切顺利,但是当我想发送我在div和ol的innerHTML中生成的代码时,没有任何反应。在这里我的功能,抱歉我的法国人的英语不好。 我的函数应该通过JSON数组并显示与Cate属于同一类别的每个元素。然后它将创建每个元素的订单列表和每个产品的一个部分。

function afficherProduit(Cate){
	produitArr = localStorage.getItem("Produit");
	if(produitArr == null){
		alert("Aucun produit enregistré.");
	}else{
		var contenuPage="";
		var contenuListe ="";
		produitArr = JSON.parse(produitArr);
		alert("on est ici" + JSON.stringify(produitArr));
		longueurArr = produitArr.produit.length;
				alert("on est ici2");
		for(i = 0; i < longueurArr;i++){
			if(produitArr.produit[i].categorie == Cate){
				alert("Correspondant trouvé");
				contenuListe += "<li><a href='#"+ i +"'>"+produitArr.produit[i].nom+"</a></li>";
				contenuPage += "<section id='"+i+"'><header><h2>" +produitArr.produit[i].fabriquant + "<a href='#haut' class='retour'>(retour haut)</a></h2></header><figure><figcaption><h3>" + produitArr.produit[i].nom;
				contenuPage += "</h3></figcaption><img src='images/'"+ produitArr.produit[i].photo+"' width='200px' height='200px'/><p>" + produitArr.produit[i].description + "</p></figure><footer class='foot'><hr/><a href='#fin'>Fin de la page</a></footer></section>";
			}
		}
		//ERREUR ICI QUELQUE PART.
		alert(contenuListe)
		x = document.getElementById("listePrincipale");
		alert("element trouve");
		x.innerHTML = contenuListe; //This is where it stop....
		alert("On vient de traversé le premier champs");
		document.getElementById("contenuPagePrincipale").innerHTML = contenuPage;
		alert(""+contenuListe+"");
	}
	
}

此警告可以帮助我了解代码停止的位置以及变量中的内容。我知道这可能是一个愚蠢的错误,但到目前为止我不知道它是什么以及如何解决我的问题...... 这是我的HTML代码,它将使用该功能...

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>
	<meta charset="UTF-8" />
	<link rel="stylesheet" type="text/css" href="styles/stylecat.css" />
	<script type="text/javascript" src="JS/jquery-2.1.4.min.js"></script>
	<script type="text/javascript" src="JS/localstorage.js"></script>
	<script type="text/javascript" src="JS/logo.js"></script>
	<script> afficherProduit('Console'); </script>
	<title>Producto - Consoles</title>
</head>

<body>
	<!-- Section En-tête -->
	<header>
	<a href="index.html"><canvas id="Logo" width="200" height="100" ></a>
		<h1>Producto Pour Tous</h1>
		<hr/>
	</header>
	<!-- Section Contenu -->
	<section id ="haut">
		<header><h2>Consoles :</h2></header>
		<figure>
			<ol id="listePrincipale">
			</ol>
		</figure>
	</section>
	<div id="contenuPagePrincipale">
	</div>
	<footer id="fin">
	<hr/>
	</footer>
</body>

</html>

感谢您的帮助,如果我的代码不好,我是Html和javascript的初学者,对不起!

0 个答案:

没有答案