1

Tengo este código que voy a copiar a continuacion, en el cual no puedo tocar el archivo HTML. Todo tiene que ser hecho en JS.

Quiero que cuando clickeo en el botón, imprima en el div con class="output" (Guardada en la variable let output, en el archivo JS) las variables status y success.

Esto es lo que he hecho hasta ahora. No entiendo porque no me funciona el evento que le he asignado al botón.

const oppoStatus = [{
    K_OPPO_STATUS: 1,
    STATUS: "1. Initial Contact",
    SUCCESS: 0,
  },
  {
    K_OPPO_STATUS: 2,
    STATUS: "2. Demonstration",
    SUCCESS: 25,
  },
  {
    K_OPPO_STATUS: 3,
    STATUS: "3. Proposal",
    SUCCESS: 50,
  },
  {
    K_OPPO_STATUS: 4,
    STATUS: "4. Negotiation",
    SUCCESS: 75,
  },
  {
    K_OPPO_STATUS: 5,
    STATUS: "5. Order",
    SUCCESS: 100,
  },
];


let select = document.querySelector("select");
let input = document.querySelector("input");
let output = document.getElementsByClassName("output");
let button = document.querySelector("button");
console.log(button)

function renderingContent() {
  for (let i = 0; i < oppoStatus.length; i++) {
    let status = oppoStatus[i].STATUS;
    let success = oppoStatus[i].SUCCESS;

    let opt = document.createElement("option");
    select.appendChild(opt);
    opt.value = success;
    opt.innerHTML = status;
  }

  select.addEventListener("change", function() {
    let optValue = select.value;
    input.value = optValue;
  });
  button.addEventListener("click", function() {

    output.textContent = select.value;

  });

}
renderingContent();
<body>
  <form>
    <select name="status"></select>
    <input name="success" type="number" min=0 max=100 step=1 value="0">
    <button type="submit">Submit</button>
  </form>
  <div class="output">Waiting for form submit...</div>
  <script src="./index.js"></script>
</body>

1 respuesta 1

1

Para evitar que el botón submit se ejecute deberías cambiarlo por:

<button type="button">Submit</button>

sino intentará procesar el formulario (o si no quieres cambiarlo deberás capturar su evento submit y parar ese comportamiento dentro con preventDefault()).

Y para que la variable output apunte correctamente al div del texto te recomiendo modificar esto:

let output = document.getElementsByClassName("output");

por esto:

let output = document.querySelector(".output");

Con ello evitas tener que lidiar con getElementsByClassName() que devuelve un array de objetos y tu lo estas tratando como si fuera uno solo.

A partir de ahí ya puedes asignar correctamente lo que desees en el textContent.

const oppoStatus = [{
    K_OPPO_STATUS: 1,
    STATUS: "1. Initial Contact",
    SUCCESS: 0,
  },
  {
    K_OPPO_STATUS: 2,
    STATUS: "2. Demonstration",
    SUCCESS: 25,
  },
  {
    K_OPPO_STATUS: 3,
    STATUS: "3. Proposal",
    SUCCESS: 50,
  },
  {
    K_OPPO_STATUS: 4,
    STATUS: "4. Negotiation",
    SUCCESS: 75,
  },
  {
    K_OPPO_STATUS: 5,
    STATUS: "5. Order",
    SUCCESS: 100,
  },
];


let select = document.querySelector("select");
let input = document.querySelector("input");
let output = document.querySelector(".output");
// let output = document.getElementsByClassName("output");
let button = document.querySelector("button");
console.log(button)

function renderingContent() {
  for (let i = 0; i < oppoStatus.length; i++) {
    let status = oppoStatus[i].STATUS;
    let success = oppoStatus[i].SUCCESS;

    let opt = document.createElement("option");
    select.appendChild(opt);
    opt.value = success;
    opt.innerHTML = status;
  }

  select.addEventListener("change", function() {
    let optValue = select.value;
    input.value = optValue;
  });
  button.addEventListener("click", function() {

    output.textContent = select.value;

  });

}
renderingContent();
<body>
  <form>
    <select name="status"></select>
    <input name="success" type="number" min=0 max=100 step=1 value="0">
    <button type="button">Submit</button>
  </form>
  <div class="output">Waiting for form submit...</div>
  <script src="./index.js"></script>
</body>

5
  • Muchas gracias @masterguru. Ya pude resolverlo. Tengo otra consulta, si no te molesta. Lo que yo tengo que imprimir es el STATUS value (solo el numero) y el SUCCESS en formato JSON. Estoy investigando como hacerlo, pero me esta costando encontrar una solucion entendible.
    – Marina.eq
    Commented el 3 may. 2022 a las 8:44
  • Si esta respuesta te ha servido para solucionar tu pregunta deberias marcarla como Aceptada para que la comunidad lo sepa y no quede eternamente pendiente de respuesta. En este enlace aprenderas como aceptar respuestas válidas a tus preguntas. Lo que tu planteas ahora es otra pregunta que hay que desarrollar de nuevo, seguramente usando la funcion split() para separar el número del texto de la variable STATUS y luego crear un objeto vacio y agregarle las propiedades que deseas para luego convertirlo a JSON mediante JSON.stringify().
    – masterguru
    Commented el 3 may. 2022 a las 9:13
  • No debemos ampliar la pregunta actual con nuevos escenarios pues entonces las respuestas quedan desvirtuadas y al final no ayudan a nadie. Es mejor ir lanzando preguntas concretas cada vez, que pueden ser más completas si quieres, pero no modificar demasiado preguntas que ya han conseguido respuestas válidas porque entonces seria un lio seguirlas.
    – masterguru
    Commented el 3 may. 2022 a las 9:20
  • Muchas gracias por tu respuesta. Ya estoy haciendo lo que sugeris.
    – Marina.eq
    Commented el 3 may. 2022 a las 9:27
  • Perfecto, gracias. Si te surgen problemas con tu nuevo código lo expones en una nueva pregunta con el error que tengas para recibir la ayuda correspondiente. Saludos!
    – masterguru
    Commented el 3 may. 2022 a las 9:32

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.