0

¿De qué manera elimino o desactivo el evento click del botón para que inicie otra función y así sumar otro párrafo y la variable "products" se muestre de manera adecuada? ¿Por qué al iterar el array arroja undefined? ¿por qué no me guarda la info correctamente en el local storage?

let button = document.getElementById("button");
let title = document.getElementById("title");
let paragraph = document.getElementById("paragraph");

button.addEventListener("click", startForm);

function startForm() {
    title.textContent = "Elige el producto que buscas.";
    paragraph.textContent = "Ingrese su nombre";
    
    let input = document.createElement("input");
    input.setAttribute('type', 'text');
    input.idName = "inputOne";

    let name = input.value;
    localStorage.setItem("Name", name);

    let container = document.getElementById("mainContent");
    container.appendChild(input);

    button.textContent = "Siguiente"; 

    let newDiv = document.createElement("div");
    container.appendChild(newDiv);

    for(product of products) {
        newDiv.innerHTML += `
        <p>Tipo: ${products.name}</p>
        `
    }
}

var products = [
    {
        id: 1,
        name: "Remeras",
    },
    {
        id: 2,
        name: "Leggins",
    },
    {
        id: 3,
        name: "Buzos",
    }
]




<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/main.css">

    <title>Cotizador</title>
</head>

<body>
    <header>
        <nav>
            <ul>
                <li>
                    <a href="#">Contacto</a>
                </li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="firstContainer" id="firstContainer">
            <div id="mainContent">
                <img src="img/indumentaria.png" alt="indumentaria">
                <h1 id="title">
                    Indumentaria deportiva de alta calidad
                </h1>
                <p id="paragraph">
                    Ingresá las características del producto que estás buscando, conocé su precio y confirmá tu pedido.
                </p>
            </div>
            <button id="button">Comenzar</button>
        </div>
    </main>
    <footer>
        <p>
            Devjogger.
        </p>
    </footer>

    <script src="js/main.js"></script>
</body>

</html>
3
  • 1
    Al iterar te lanza undefinded porque estás poniendo <p>Tipo: ${products.name}</p> con una s y debería ser <p>Tipo: ${product.name}</p>. Puedes eliminar el evento simplemente con removeEventListener().
    – Jaime
    Commented el 21 sept. 2021 a las 12:56
  • Considera adjuntar parte de tu html en este tipo de preguntas, así tu problema puede reproducirse de manera más fácil.
    – Jaime
    Commented el 21 sept. 2021 a las 12:59
  • Tienes razón @JaimeMenéndez acabo de colocar el código HTML pues todavía no sé cómo eliminar o desactivar el evento click del botón para que inicie otra función y así sumar otro párrafo Commented el 21 sept. 2021 a las 18:00

1 respuesta 1

0

Para eliminar el evento del botón:

button.removeEventListener("click", startForm);
  • En el localStorage sí se guarda el atributo Name, pero su valor es vacío, ya que guardas inmediatamente después de crear el input.
  • Podrías añadir un evento al input para que guarde el valor al introducir un valor.
  • Además, si creas otro párrafo, lo que introduzcas sobre escribirá el localStorage atributo Name, deberías dar distintos nombres para almacenar los valores de cada input.
  let i = 0;
  function startForm() {
      title.textContent = "Elige el producto que buscas.";
      paragraph.textContent = "Ingrese su nombre";

      let input = document.createElement("input");
      input.setAttribute('type', 'text');
      input.idName = "input"+i;

      input.addEventListener('keyup', saveIntoLocalStorage);

      let container = document.getElementById("mainContent");
      container.appendChild(input);

      button.textContent = "Siguiente";

      let newDiv = document.createElement("div");
      container.appendChild(newDiv);

      for(product of products) {
          newDiv.innerHTML += `
          <p>Tipo: ${product.name}</p>
          `
      }
      i++;
  }

  function saveIntoLocalStorage(){
    localStorage.setItem(this.idName, this.value);
  }

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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