1

Lo que sucede es que cada vez que le doy click en el boton se genera una nueva tarjeta pero esta sale multiplicada por el numero de veces que le presione supongo que ha de ser el error dentro del array Push pero la verdad no se como solucionarlo, anteriormente el push se partia individualmente lo que ocacionaba una tarjeta por cada dato pero converti en un objeto y ahora es una tarjeta por el doble de clicks que le de al boton de generación, caso tal que como muestro en el codigo { Ejecutar } es lo que sucede al momento de clickearle,

si hay alguien que pueda ayudarme le agradeceria demasiado.

let main = document.querySelector("body")
let accommodation = document.getElementById("alojamientoInpt");
let date = document.getElementById("fecha");
let product= document.getElementById("productoInpt");
let amount = document.getElementById("cantidadInpt");
let desc = document.getElementById("desc");
let btn = document.getElementById("submitBtn");
let cards = document.getElementById("CardsContainer");
const inputsInfo = [];

const dateToday = new Date();
const dateInfo = dateToday.getMonth() + 1 + "/" + dateToday.getDate() + "/" + dateToday.getFullYear()

date.value = dateInfo;

function changeToNumber() {
    Number(amount.value);
    console.log(amount.value);
}

btn.addEventListener("click", ()=>{
    inputsInfo.push({
        title: accommodation.value,
        product: product.value,
        date: dateInfo,
        amount: amount.value,
        desc: desc.value
    })
    inputsInfo.forEach(()=>{
        cards.innerHTML += `<div class="card">
        <em>Alojamiento:</em>
        <h2 class="title-card">${accommodation.value}</h2>
        <em>fecha: <span class="date-card_span">${dateInfo}</span></em>
        <h3 class="product-nameh3">${product.value}</h3>
        <em>cantidad: <span class="product-card_span">${amount.value}</span></em>
        <br>
        <em>Nota:</em>
        <p class="especific-card">${desc.value}</p>
      </div>`
    })
});
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

*{
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    /* Colors */
    --body-color: #E4E9F7;
    --sidebar-color: #FFF;
    --primary-color: #0fd371;
    --primary-color-light: #F6F5FF;
    --toggle-color: #DDD;
    --text-color: #707070;

    /* Transitions */
    --tran-02: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
    

}

body{
    height: 100vh;
    background: var(--body-color);
    transition: var(--tran-04);
    color: var(--text-color);
}

body.dark{
    --body-color: #18191A;
    --sidebar-color: #242526;
    --primary-color: #3A3B3C;
    --primary-color-light: #3A3B3C;
    --toggle-color: #DDD;
    --text-color: white;
}

body.dark li .icon,
.sidebar li .text:hover{
       color: white;
       transition: var(--tran-02);
}

/* -- Resuable css -- */

.sidebar .text {
    font-size: 20px;
    font-weight: 500;
    color: var(--text-color);
}

 /* -- Siderbar -- */

.sidebar header{
    position: relative;
}

.sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    padding: 10px 14px;
    background: var(--sidebar-color);
}

.sidebar li{
    height: 50px;
    margin-top: 10px;
    list-style: none;
    display: flex;
    align-items: center ;
}
.sidebar li .icon{
    display: flex;
    align-items: center ;
    justify-content: center;
    font-size: 20px;
    min-width: 60px;
}

.sidebar li .icon,
.sidebar li .text{
       color: var(--text-color);
       transition: var(--tran-02);
}

.sidebar .image-text img{
    width: 70px;
    border-radius: 6px;
}

.sidebar header .image-text{
    display: flex;
    align-items: center;
}

eader .image-text .header-text {
    display: flex;
    flex-direction: column;
}

.header-text .name {
    font-weight: 600;
}

.header-text .profession{
    margin-top: -2px;
}

.sidebar header .toggle{
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    height: 25px;
    width: 25px;
    background: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.sidebar .search-box{
    background-color: var(--primary-color-light);
    border-radius: 15px;
}

.search-box input{
    height: 100%;
    width: 100%;
    outline: none;
    border: none;
    background: var(--primary-color-light);
}

.sidebar li a{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 15px;
    transition: var(--tran-04);
}

.sidebar li a:hover{
    background: var(--primary-color);
}

.sidebar li a:hover .icon,
.sidebar li a:hover .text{
    color: var(--sidebar-color);
}

.sidebar .menu-bar{
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu-bar .mode{
    background: var(--primary-color-light);
    border-radius: 15px;
}

.menu-bar .mode .moon-sun{
    height: 50px;
    width: 60px;
    display: flex;
    align-items: center;
}

.menu-bar .mode i{
    position: absolute;
}

.menu-bar .mode i.sun{
    opacity: 0;
}

.menu-bar .mode .toggle-switch{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-width: 60px;
    cursor: pointer;
}

.toggle-switch .switch{
    position: relative;
    height: 22px;
    width: 44px;
    border-radius: 25px;
    background: var(--toggle-color);
}

.switch::before{
    content: '';
    position: absolute;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background: var(--sidebar-color);
    transition: var(--tran-03);
}

body.dark .switch::before{
    left: 25px;
}

nav{
    margin: 0 1250px 0 0;
}

.Dashboard-container{
    margin: 40px 0 0 300px;
}

.Dashboard-container::before{
    color: white;
}

.pedido_form{
    text-align: center;
    margin: 0 0 150px 0;
}

.inpt {
    width: 260px;
    height: 30px;
    margin: 10px;
    padding: 0 15px 0 15px;
    border-style: solid;
    border-color: #3ad8ff;
    border-radius: 5px;
    color: black;
    outline: none;
}

.inpt.dark{
    color: #00181a;
}

.inpt::placeholder {
    color: white;
    opacity: 1;
}

.btn {
    width: 250px;
    height: 30px;
    border-radius: 5px;
    border: none;
    outline: none;
    background-color: #00181a;
    color: white;
    cursor: pointer;
}

button {
    outline: none;
    margin: 5px;
}

.cards-Container{
    width: 98%;
    height: 60vh;
    background-color: #ffffff;
    border-style: solid;
    border-color: #3ad8ff;
    border-radius: 5px;
    padding: 20px;
}

.card{
    max-width: 300px;
    height: auto;
    padding: 15px;
    margin: 15px;
    background-color: #010211;
    text-align: center;
    color: white;
    border-radius: 5px;
}
 <section class="Dashboard-container">
                <h2>Creación de pedidos</h2>
                <br>
                <div class="pedido_form">
                    <label for="alojamientoInpt"><h3>Alojamiento</h3></label>
                    <input type="text" name="alojamientoInpt" id="alojamientoInpt" class="inpt">
                    <label for="date"><h3>Fecha ( Automatica )</h3></label>
                    <input type="date" name="date" id="fecha" required class="inpt" readonly value="">
                    <label for="producto"><h3>Producto</h3></label>
                    <input type="text" name="producto" id="productoInpt" required class="inpt">
                    <label for="cantidad"><h3>Cantidad</h3></label>
                    <input type="number" name="cantidad" id="cantidadInpt" required class="inpt">
                    <br>
                    <label for="especificaciones"><h3>Especificaciones ( Opcional )</h3></label>
                    <br>
                    <textarea name="especificaciones" id="desc" cols="30" rows="10" class="inpt"></textarea>
                    <br>
                    <button type="submit" class="btn" id="submitBtn"><h3>Enviar</h3></button>
                </div>
                <h2>Pedidos</h2>
                <br>
                <div class="cards-Container" id="CardsContainer">

7
  • Supongo que el fallo no será que te falta un simbolo de suma: + en el card = dejándolo así: card += (y debes inicializar la variable fuera del bucle con un let card = '' por ejemplo).
    – masterguru
    el 25 sep. 2022 a las 21:45
  • Super! me funciono Muchas gracias... ahora hay otro problema :( dentro del push se obtenian los datos por separado haciendo que se generaran 5 tarjetas de un solo click ya que hay 5 datos, lo sustitui por un objeto y ahora funciona pero cada vez que le doy click se duplica y luego se triplica y asi... el 25 sep. 2022 a las 22:09
  • [1]: i.stack.imgur.com/6wnaa.png el 25 sep. 2022 a las 22:17
  • Pon el html para que te puedan ayudar mejor... antes me tomé la molestia de crearlo por mi cuenta para encontrar esos fallos, pero ya cerré esa pestaña y mejor que hagas tu el esfuerzo de ponerlo en la pregunta para que lo podamos copiar-pegar en lugar de tenerlo que hacer nosotros inventandonos tu escenario. Para ello pulsa sobre el enlace editar y modifica tu pregunta. Y léete ejemplo mínimo verificable, gracias.
    – masterguru
    el 25 sep. 2022 a las 22:22
  • Dale, Gracias!! @masterguru el 25 sep. 2022 a las 22:25

2 respuestas 2

0

solo tenes que cambiar:

cards.innerHTML = "" vaciamos el contenido y lo volvemos a cargar de 0 en el forEach
    inputsInfo.forEach(()=>{
        cards.innerHTML += `<div class="card">
        <em>Alojamiento:</em>
        <h2 class="title-card">${accommodation.value}</h2>
        <em>fecha: <span class="date-card_span">${dateInfo}</span></em>
        <h3 class="product-nameh3">${product.value}</h3>
        <em>cantidad: <span class="product-card_span">${amount.value}</span></em>
        <br>
        <em>Nota:</em>
        <p class="especific-card">${desc.value}</p>
      </div>`
    })

esto dentro del evento click

0

Si se te duplica o triplica el contenido es porque no lo está reseteando por cada nuevo valor y se agrega al contenido anterior. Una solución es está partiendo de tu código

btn.addEventListener("click", ()=>{
inputsInfo.push({
    title: accommodation.value,
    product: product.value,
    date: dateInfo,
    amount: amount.value,
    desc: desc.value
})

let auxCard = '';
inputsInfo.forEach(()=>{
    auxCard += `<div class="card">
    <em>Alojamiento:</em>
    <h2 class="title-card">${accommodation.value}</h2>
    <em>fecha: <span class="date-card_span">${dateInfo}</span></em>
    <h3 class="product-nameh3">${product.value}</h3>
    <em>cantidad: <span class="product-card_span">${amount.value}</span></em>
    <br>
    <em>Nota:</em>
    <p class="especific-card">${desc.value}</p>
  </div>`
});
cards.innerHTML = auxCard ;

});

1
  • La variable auxCard siempre está inicializado vacio por cada vez que haces un click, entonces recorre el array con los valores actuales y arma el contenido por último lo reemplazas el 26 sep. 2022 a las 0:53

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.