当我从菜单中选择 3 种产品时，它有效，但如果我选择 1 o 2，则无效。 我的意思是，它只能特别适用于选择3个产品，选择1时，它告诉我线路177上有错误，初始化Productodos的行。如果我选择 2，它会告诉我第 181 行有错误，这是初始化 productoTres 的行。
如果我写这个，它适用于 1 个产品和 2 个产品，问题是我不能让它与超过 2 个产品一起使用
botonContinuar.onclick = function(){
let formulario2 = document.querySelector("#formulario-2");
let formaDePago = formulario2.TypeOfPaymentyOption.value;
valid = true;
event.preventDefault();
// your validations
if((formaDePago) == ""){
alert("Completa los espacios requeridos.")
valid = false;
console.log("falso")
}
// and so on all your validations
if(valid){
let productoUno = document.querySelectorAll("#exampleModalLabel2")[0].textContent
let precioUno = document.querySelectorAll("#price-span2")[0].textContent
let cantidadUno = document.querySelectorAll("#sel2")[0].value
let productoDos = document.querySelectorAll("#exampleModalLabel2")[1].textContent
let cantidadDos = document.querySelectorAll("#sel2")[1].value
let precioDos = document.querySelectorAll("#price-span2")[1].textContent
let productoTres = document.querySelectorAll("#exampleModalLabel2")[2].textContent
let cantidadTres = document.querySelectorAll("#sel2")[2].value
let precioTres = document.querySelectorAll("#price-span2")[2].textContent
let total = document.querySelector("#total-estimado").textContent
switch(numeroPedidos){
case 1:
let pedido1Item = `*PEDIDO: DM Indumentaria* %0a%0a— *[ ${cantidadUno} ]* ${productoUno} > *${precioUno}*%0a%0a*Total:* ${total}*%0aForma de pago: *${formaDePago}*%0a`;
window.open("https://api.whatsapp.com/send?phone=5493815415219&text=" + pedido1Item);
break
case 2:
let pedido2Item = `*PEDIDO: DM Indumentaria* %0a%0a— *[ ${cantidadUno} ]* ${productoUno} > *${precioUno}*%0a— *[ ${cantidadDos} ]* ${productoDos} > *${precioDos}* %0a %0a*Total:* ${total}*%0aForma de pago: *${formaDePago}*%0a`;
window.open("https://api.whatsapp.com/send?phone=5493815415219&text=" + pedido2Item);
break;
case 3:
let pedido3Item = `*PEDIDO: DM Indumentaria* %0a%0a— *[ ${cantidadUno} ]* ${productoUno} > *${precioUno}*%0a— *[ ${cantidadDos} ]* ${productoDos} > *${precioDos}*%0a— *[ ${cantidadTres} ]* ${productoTres} > *${precioTres}* %0a %0a*Total:* ${total}*%0aForma de pago: *${formaDePago}*%0a`;
window.open("https://api.whatsapp.com/send?phone=5493815415219&text=" + pedido3Item);
break;
default:
document.write("El usuario ingreso una operacion incorrecta");
}
}
}
更新：更新版本：
botonContinuar.onclick = function(){
let formulario1 = document.querySelector("#formulario-1");
let formulario2 = document.querySelector("#formulario-2");
let tipoDeEnvio = formulario1.TypeOfDeliveryOption.value;
let formaDePago = formulario2.TypeOfPaymentyOption.value;
valid = true;
event.preventDefault();
// your validations
if((formaDePago && tipoDeEnvio) == ""){
alert("Completa los espacios requeridos.")
valid = false;
console.log("falso")
}
// and so on all your validations
if(valid){
let productoUno = document.querySelectorAll("#exampleModalLabel2")[0].textContent
let precioUno = document.querySelectorAll("#price-span2")[0].textContent
let cantidadUno = document.querySelectorAll("#sel2")[0].value
let total = document.querySelector("#total-estimado").textContent
if(numeroPedidos === 1){
let pedido1Item = `*PEDIDO: DM Indumentaria* %0a%0a— *[ ${cantidadUno} ]* ${productoUno} > *${precioUno}*%0a%0a*Total:* ${total}%0a%0aTipo de envío: *${tipoDeEnvio}*%0aForma de pago: *${formaDePago}*%0a`;
window.open("https://api.whatsapp.com/send?phone=5493815415219&text=" + pedido1Item);
} else if (numeroPedidos > 1){
let productoDos = document.querySelectorAll("#exampleModalLabel2")[1].textContent
let cantidadDos = document.querySelectorAll("#sel2")[1].value
let precioDos = document.querySelectorAll("#price-span2")[1].textContent
let pedido2Item = `*PEDIDO: DM Indumentaria* %0a%0a— *[ ${cantidadUno} ]* ${productoUno} > *${precioUno}*%0a— *[ ${cantidadDos} ]* ${productoDos} > *${precioDos}* %0a %0a*Total:* ${total}%0a%0aTipo de envío: *${tipoDeEnvio}*%0aForma de pago: *${formaDePago}*%0a`;
window.open("https://api.whatsapp.com/send?phone=5493815415219&text=" + pedido2Item);
}
}
}
HTML 页面：
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes" />
<link rel="shortcut icon" href="images/icon.png" type="image/x-icon" />
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
<meta name="keywords" content="Plataforma mozo" />
<meta name="description"
content="Plataforma Mozos" />
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/default.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<title>Plataforma de pedidos</title>
</head>
<body>
<header>
<nav class="navbar navbar-expand-md bg-light navbar-light">
<a class="navbar-brand" href="#"><img width="80px" src="img/logo.png" alt=""></a>
<h3 class="font-weight-light">Plataforma para mozos</h1>
</nav>
</header>
<main>
<section>
<!-- Hamburguesas -->
<div class="container text-center my-4">
<h4 class="p-2" style="color:#535353 ; font-weight: 600; border: 2px solid #CBC9C9 ; border-radius: 10px;">Hamburguesas</h4>
</div>
<hr>
<div class="container">
<!--Smashed-->
<div class="menu-item position-relative mb-3 col-sm-6 col-lg-6" onclick="addToModalClicked(event)" data-target="#exampleModal" data-target="#exampleModal" data-toggle="modal">
<div class="d-flex align-items-center">
<img src="#" alt="" style="width: 120px; height: 100px"class="not-display card-image">
<div>
<h5 class="ml-2 card-title">Smashed Burger con papas</h5>
<p class="ml-2 card-text">Pan casero, hamburguesa, tomate, lechuga, salsa de ajo, queso cheddar y papas fritas.<span class="not-display"></span></p>
<h6 class="ml-2 card-price" style="padding-top: 30px;color: green;">$ 270</h6>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<!--Veggie-->
<div class="menu-item position-relative mb-3 col-sm-6 col-lg-6" onclick="addToModalClicked(event)" data-target="#exampleModal" data-target="#exampleModal" data-toggle="modal">
<div class="d-flex align-items-center">
<img src="#" alt="" style="width: 120px; height: 100px"class="not-display card-image">
<div>
<h5 class="ml-2 card-title">Veggie Burger con papas</h5>
<p class="ml-2 card-text">Pan casero, hamburguesa vegetariana, tomate, lechuga, salsa de ajo, queso cheddar y papas fritas.
<br>
Variedades: Garbanzo, Soja, Quinoa, Lenteja.<span class="not-display"></span></p>
<h6 class="ml-2 card-price" style="padding-top: 30px;color: green;">$ 250</h6>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<!--NOTco-->
<div class="menu-item position-relative mb-3 col-sm-6 col-lg-6" onclick="addToModalClicked(event)" data-target="#exampleModal" data-target="#exampleModal" data-toggle="modal">
<div class="d-flex align-items-center">
<img src="#" alt="" style="width: 120px; height: 100px"class="not-display card-image">
<div>
<h5 class="ml-2 card-title">NOTco Burger con papas</h5>
<p class="ml-2 card-text">Pan casero, hamburguesa vegana NOTco, tomate, lechuga, salsa de ajo, queso cheddar y papas fritas.<span class="not-display"></span></p>
<h6 class="ml-2 card-price" style="padding-top: 30px;color: green;">$ 350</h6>
</div>
</div>
</div>
</div>
<hr>
</section>
<section>
<!-- Papas -->
<div class="container text-center my-4">
<h4 class="p-2" style="color:#535353 ; font-weight: 600; border: 2px solid #CBC9C9 ; border-radius: 10px;">Papas</h4>
</div>
<hr>
<div class="container">
<!--Medianas-->
<div class="menu-item position-relative mb-3 col-sm-6 col-lg-6" onclick="addToModalClicked(event)" data-target="#exampleModal" data-target="#exampleModal" data-toggle="modal">
<div class="d-flex align-items-center">
<img src="#" alt="" style="width: 120px; height: 100px"class="not-display card-image">
<div>
<h5 class="ml-2 card-title">Papas fritas grandes</h5>
<h6 class="ml-2 card-price" style="padding-top: 30px;color: green;">$ 180</h6>
<p class="ml-2 card-text"><span class="not-display"></span></p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<!--Grandes-->
<div class="menu-item position-relative mb-3 col-sm-6 col-lg-6" onclick="addToModalClicked(event)" data-target="#exampleModal" data-target="#exampleModal" data-toggle="modal">
<div class="d-flex align-items-center">
<img src="#" alt="" style="width: 120px; height: 100px"class="not-display card-image">
<div>
<h5 class="ml-2 card-title">Papas fritas medianas</h5>
<h6 class="ml-2 card-price" style="padding-top: 30px;color: green;">$ 150</h6>
<p class="ml-2 card-text"><span class="not-display"></span></p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<!--Medianas cheddar-->
<div class="menu-item position-relative mb-3 col-sm-6 col-lg-6" onclick="addToModalClicked(event)" data-target="#exampleModal" data-target="#exampleModal" data-toggle="modal">
<div class="d-flex align-items-center">
<img src="#" alt="" style="width: 120px; height: 100px"class="not-display card-image">
<div>
<h5 class="ml-2 card-title">Papas cheddar grandes</h5>
<h6 class="ml-2 card-price" style="padding-top: 30px;color: green;">$ 230</h6>
<p class="ml-2 card-text"><span class="not-display"></span></p>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<!--Grandes cheddar-->
<div class="menu-item position-relative mb-3 col-sm-6 col-lg-6" onclick="addToModalClicked(event)" data-target="#exampleModal" data-target="#exampleModal" data-toggle="modal">
<div class="d-flex align-items-center">
<img src="#" alt="" style="width: 120px; height: 100px"class="not-display card-image">
<div>
<h5 class="ml-2 card-title">Papas cheddar medianas</h5>
<h6 class="ml-2 card-price" style="padding-top: 30px;color: green;">$ 200</h6>
<p class="ml-2 card-text"><span class="not-display"></span></p>
</div>
</div>
</div>
</div>
<hr>
</section>
</main>
<section>
<!-- Modal de productos-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: black!important; position: absolute; right: 5px;font-size: 3rem;font-weight: 300!important; ">
<span aria-hidden="true">×</span>
</button>
<img class="modalimage" style="width:230px; margin: 0 auto;" src="" id="exampleModalImage" alt="">
<div class="modal-header row" style="border-bottom:0; padding: 0!important;">
<h3 class="modal-title mt-3" id="exampleModalLabel" style="margin: 0 auto; padding: 0 50px; text-align: center;">Modal title</h3>
</div>
<div class="modal-body text-center" id="modalText" style="padding: 0.6rem!important;">...</div>
<div class="form-group">
<label for="sel1" class="ml-4" style="font-weight: 700!important;">CANTIDAD:</label>
<select class="form-control" id="sel1" name="sellist1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="modal-footer">
<button id="boton-agregar" type="button" class="btn btn-primary" data-dismiss="modal" style="margin: 0 auto;">Agregar
<span class="span-button" style="padding: 6px; background-color: #3e33ef; margin-right: 10px;">1 Item</span>
<span id="price-span"> $0 </span>
</button>
</div>
</div>
</div>
</div>
<!-- Modal de pedidos-->
<div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" id="content-pedidos">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
style="color:black!important; right: 0px; position: absolute; left: 5px;font-size: 3rem; ">
<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-arrow-left-short" fill="currentColor"
xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M7.854 4.646a.5.5 0 0 1 0 .708L5.207 8l2.647 2.646a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 0 1 .708 0z" />
<path fill-rule="evenodd" d="M4.5 8a.5.5 0 0 1 .5-.5h6.5a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z" />
</svg>
</button>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"
style="color: black!important; position: absolute; right: 5px;font-size: 3rem;font-weight: 300!important; ">
<span aria-hidden="true">×</span>
</button>
<div class="modal-products">
<div class="modal-header mt-5">
<div>
<h5 class="modal-title-pedidos" id="exampleModalLabel2">Modal title </h5>
<span class="card-price" id="price-span2"> $0 </span>
</div>
<div class="form-group">
<select onclick="actualizarCantidadPedidos(event)" class="form-control" id="sel2"
name="sellist2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="sel1" class="ml-4" style="font-weight: 700!important;">MESA:</label>
<select class="form-control" id="numMesa" name="numeroMesa">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
</select>
</div>
<div>
<div style="text-align:center;">
<p>Total estimado: <span id="total-estimado"></span></p>
</div>
<div>
<form class="m-5" id="formulario-2">
<h6 style="text-align: center;">Forma de pago <span style="color: red;">*</span></h6>
<div class="row">
<label for="inlineRadioPayment1" class="btn-block">Efectivo</label>
<input class="form-check-input" type="radio" name="TypeOfPaymentyOption"
id="inlineRadioPayment1" value="Efectivo">
</div>
<div class="row">
<label for="inlineRadioPayment2" class="btn-block">Mercado Pago/Tarjeta</label>
<input class="form-check-input" type="radio" name="TypeOfPaymentyOption"
id="inlineRadioPayment2" value="Mercado Pago">
</div>
</form>
</div>
<div class="modal-footer" style="padding: 0.3rem;">
<button id="boton-continuar" type="button" class="btn btn-primary"
style="font-weight: 30; margin: 0 auto;">Confirmar comanda<i
class="fa fa-whatsapp" style="padding-left: 5px;"></i> </button>
</div>
</div>
</div>
</div>
</div>
<!-- Boton de pedidos-->
<div class="mb-5 btn btn-primary fixed-bottom not-display container shadow-lg" style="width:80%!important;" data-target="#exampleModal2" data-toggle="modal" id="boton-pedidos">
<i class="fa fa-shopping-bag" style="padding-right: 5px;"></i>
Tu pedido: <span id="price-span-pedidos">$0</span>
</div>
</section>
<footer class="text-light py-3">
<p class="text-center lead">Sean bienvenidos siempre</p>
<p class="text-center">La Romana Eventos 2020</p>
</footer>
<script src="https://kit.fontawesome.com/b6f4b16237.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/@popperjs/core@2"></script>
<script type = "text/javascript" src="js/scripts.js"></script>
</body>
</html>答案 0 :(得分：0)
我想该页面已经有代码来构建购物车中的商品列表，任务是遍历 document.querySelectorAll("#exampleModalLabel2") 和其他查询的结果以动态构建订单摘要。
这应该会有所帮助。它获取所有标题/价格和数量，并根据数量构建 items 数组和订单摘要消息。
Array.push() 用于向数组添加元素，Array.join() 用于将字符串连接在一起，template literals 用于构建摘要。
botonContinuar.onclick = function(){
let formulario2 = document.querySelector("#formulario-2");
let formaDePago = formulario2.TypeOfPaymentyOption.value;
valid = true;
event.preventDefault();
// your validations
if ((formaDePago) === "") {
alert("Completa los espacios requeridos.")
valid = false;
}
// and so on all your validations
if (valid) {
const names = document.querySelectorAll("#exampleModalLabel2");
const prices = document.querySelectorAll("#price-span2");
const quantities = document.querySelectorAll("#sel2");
let items = [];
for (let i = 0; i < names.length; i++) {
const name = names[i].textContent;
const quantity = quantities[i].value;
const price = prices[i].textContent;
items.push(`— *[ ${quantity} ]* ${name} > *${price}*%0a`)
}
let total = document.querySelector("#total-estimado").textContent;
const text = `*PEDIDO: DM Indumentaria* %0a%0a${items.join('')}%0a*Total:* ${total}*%0aForma de pago: *${formaDePago}*%0a`;
console.log(text);
window.open("https://api.whatsapp.com/send?phone=5493815415219&text=" + text);
alert('Order has been sent');
}
}
附言
建议在页面上有唯一的 ID 标签。
所以我建议更改所有重复的 ID
<块引用>id="sel2"、id="exampleModalLabel2"、id="price-span2"
到类名
<块引用>class="sel2 form-control"、class="exampleModalLabel2 modal-title-pedidos" 和 class="price-span2 card-price"
并在上面的代码中将选择器从 #id 调整为 .class
document.querySelectorAll(".sel2")