我需要在我的按钮上点击两次来验证我的表单，
我有一个像这样的事件监听器:
btnCartSend.addEventListener('click', function(){
checkInput();
window.location="confirm.html "
})
然后调用
function checkInput(){
if (fristName.length == 0){
alert("test 1");
}else if(lastName.length == 0){
alert("test 2");
}else if(address.length == 0){
alert("test 3");
}else if(zip.length != 5){
alert("test 4");
}else if(city.length == 0){
alert("test 5");
}else if(email.length == 0){
alert("test 6");
}else {
console.log('send to api');
sendToApi();
}
}
我把整个项目放在我的github上，这里你有购物车文件与函数和其他:https://github.com/lliolla/P5-onorico/blob/master/frontend/js/cart.js
我已经克隆了您的项目，并发现您正在使用shoppingCart的一些遗漏。长度无处不在，而shoppingCart最初是null，所以无论你在哪里使用长度或任何其他属性，请首先检查该变量是否为null。
修复所有这些之后，我已经运行了代码，它正在验证表单与一个单一的点击。
检查你的代码或将cart.js替换为我在某些地方修改过的代码
//déclaration des variables
let shoppingCart = JSON.parse(localStorage.getItem('shoppingCart')); // recuperer le panier convertit en javascript
console.log('shoppingCart',shoppingCart)
let orderInfos = JSON.parse(localStorage.getItem('orderInfos')); // recuperer le retour API convertit en javascript
console.log('orderInfos',orderInfos)
let form =document.getElementById("form") // formulaire
let btnCartSend =document.getElementById("btnCartSend") // bouton envoi
let tableCartRows = document.getElementById("tableCartRows")// corps du tableau
let tableFoot = document.getElementById("tableFoot")//pied du tableau
let table=document.getElementById("table") // tableau entier
let tableTitle=document.getElementById("tableTitle") // h2
let orderModal = document.getElementById('orderModal')// modal de confirmation de commande
//variables info clients a vérifier
let fristName = document.getElementById("inputFristName").value;
let lastName= document.getElementById("inputLastName").value;
let address = document.getElementById("inputAddress").value;
let zip = document.getElementById("inputZip").value;
let city = document.getElementById("inputCity").value;
let email = document.getElementById("InputMail").value;
function showCart(){
//au chargement de la page génerer dynamiquement le panier si shoppingcart est plein sinon on affiche panier vide avec bouton de retour a teddiesHome.html
if (shoppingCart && shoppingCart.length <= 0) {
// on masque le cart le formulaire et son bouton et on affiche un retour à la page des produits
tableTitle.style.display = "none";
tableCart.style.display = "none";
form.style.display = "none";
btnCartSend.style.display = "none";
let h2 = document.createElement("h2");
table.appendChild(h2);
h2.textContent ="Votre panier est vide ";
let p = document.createElement("p");
table.appendChild(p);
p.textContent ="Faites un petit tour dans nos boutiques et laissez-vous tenter";
var a = document.createElement("a");
p.appendChild(a);
a.setAttribute('class','btn btn-secondary btn-lg btn-block');
a.setAttribute('href','teddiesHome.html');
a.setAttribute('role','button');
a.textContent = "Continuer mes achats";
}else{
totalCartPrice ();// total price du panier
//verifier si il y a des doublons
if(shoppingCart) {
createTableCart(); //sinon afficher le panie
}
}
}
showCart()
function delateItemCart(index){
//supprimer un teddy en fonction de son index dans teddyArray
console.log ("suprimer le teddy dans shopping cart",index, shoppingCart[index])
shoppingCart.splice(index,1)
console.log ("suprimer le teddy dans shopping cart", shoppingCart)
//vide le localstorage
localStorage.clear();
//mettre à jour le local storage avec nouveau panier
localStorage.setItem('shoppingCart',JSON.stringify(shoppingCart) ) ;
totalCartPrice ();
// recharger la page
document.location.reload();
//}
}
// on fait une boucle pour acceder à tous les boutons supprimer
let bntDelated = document.querySelectorAll('.bntDelated') //boutons supprimer
for (i=0 ;i<bntDelated.length ; i++ ){
console.log("bntDelated", bntDelated[i])
bntDelated[i].addEventListener("click", function(){ // au clic sur sup on suprimer le teddy coorepondant dans le shopping cart
let index = Array.from(bntDelated).indexOf(event.target) ;
console.log("click pour suprimer envoi l'index, ",index)
delateItemCart(index);
})
}
// au clic sur le btn envoyer la commande
btnCartSend.addEventListener('click', function(){
checkInput();// on verifie le format des input
sendToApi(); // on envoi les donnees a l'api et on recuperer le num de commande
//si tout est ok on affiche le modal avec un num de commande et le prix total
window.location="confirm.html "
})
function totalCartPrice (){
if(shoppingCart) {
let totalCart = 0;
for ( let i=0; i<shoppingCart.length ; i++ ){
let cartQte = shoppingCart[i].qte;
let cartprice = shoppingCart[i].price;
totalCart += cartQte * cartprice
localStorage.setItem('totalCart',JSON.stringify(totalCart) );
}
}
}
function createTableCart(){// on affiche dynamiquement le panier sous forme de tableau
// on boucle le shopping cart pour afficher une ligne par teddy
for ( let i=0; i<shoppingCart.length ; i++ ){
let tr1 = document.createElement("tr");
tableCartRows.appendChild(tr1);
let th7 = document.createElement("th");
tr1.appendChild(th7);
th7.setAttribute('scoop','row');
th7.textContent="counter ligne";
let td = document.createElement("td");
tr1.appendChild(td);
let teddyname =shoppingCart[i].name ;
td.textContent= teddyname;
td.setAttribute("id","Name")
let td1 = document.createElement("td");
tr1.appendChild(td1);
let teddyColor = shoppingCart[i].colors;
td1.textContent=teddyColor;
td.setAttribute("id","Color")
let price = shoppingCart[i].price + "€";
let td2 = document.createElement("td");
tr1.appendChild(td2);
td2.textContent=price;
let td3 = document.createElement("td");
tr1.appendChild(td3);
td3.setAttribute("class","counter");
let div = document.createElement("div");
td3.appendChild(div);
div.setAttribute("class","number");
div.setAttribute("id","number");
div.textContent=shoppingCart[i].qte;
// let div1 = document.createElement("div")
// td3.appendChild(div1)
// div1.setAttribute("class","counter-clic")
// let i1 = document.createElement("i")
// div1.appendChild(i1)
// i1.setAttribute("class","fas fa-plus plus")
// let i2 = document.createElement("i")
// div1.appendChild(i2)
// i2.setAttribute("class","fas fa-minus minus")
// let td4 = document.createElement("td")
// tr1.appendChild(td4)
// td4.textContent= subTotal
let td5 = document.createElement("td");
tr1.appendChild(td5);
td5.setAttribute("class","text-center");
let i3 = document.createElement("i");
td5.appendChild(i3);
i3.setAttribute("class","fas fa-times-circle bntDelated");
}
let tr2 = document.createElement("tr");
tableFoot.appendChild(tr2);
let td6 = document.createElement("td");
tr2.appendChild(td6);
td6.setAttribute("colspan","2");
let td7 = document.createElement("td");
tr2.appendChild(td7);
td7.textContent = "Total"
let totalCart = localStorage.getItem('totalCart')
let td8 = document.createElement("td");
tr2.appendChild(td8);
td8.setAttribute("colspan","3");
td8.setAttribute('class','text-right');
td8.textContent = totalCart + "€";
}
function checkInput(){
if (fristName.length == 0){
alert("test 1");
}else if(lastName.length == 0){
alert("test 2");
}else if(address.length == 0){
alert("test 3");
}else if(zip.length != 5){
alert("test 4");
}else if(city.length == 0){
alert("test 5");
}else if(email.length == 0){
alert("test 6");
}else {
console.log('send to api');
sendToApi();
}
}
function sendToApi(){
// crerer un objet qui va recuperer la value de chaque input du formulaire
//creation de la class client
class customer{
constructor(fristName,lastName,address,city,email){
this.lastName = lastName;
this.fristName = fristName;
this.address = address;
this.city = city;
this.email = email;
}
}
// objet contenant les infos du formulaire
let newCustumer = new customer (lastName,fristName, address,city,email)
// creer un tableau pour envoyer uniquement les ID des teddy
//recupérer le shoppingCart
let apiCart =JSON.parse(localStorage.getItem("shoppingCart")) ;
console.log("apiCart",apiCart)
let apiCartArray = []; // tableau des id des teddy
//parcourir le tableau et recuperer les id des teddy
if(apiCart) {
for (let i=0; i<apiCart.length; i++){
apiCartArray.push(apiCart[i].id)
console.log("send api id",apiCartArray)
}
}
// POST API
fetch("http://localhost:3000/api/teddies/order", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
contact: {
firstName: newCustumer.fristName,
lastName: newCustumer.lastName,
address: newCustumer.address,
city: newCustumer.city,
email: newCustumer.email,
},
products: apiCartArray,
}),
})
.then((response) => {
if (response.ok) {
return response.json();
}
})
.then((data) => {
localStorage.setItem("orderInfos", JSON.stringify(data));
})
.catch((error) => console.log("erreur de type : ", error));
}