0

Actualmente estoy trabajando en un algoritmo en el que las personas puedan seleccionar el equipo que creen que ganará en un torneo, en este caso, se ocultarán los equipos que el usuario no vaya seleccionando a medida que van avanzando las rondas, en este caso, el administrador da los 16 equipos iniciales ordenados en 8 encuentros. En la segunda ronda automáticamente deberían desaparecer de las opciones posibles en los 4 encuentros los equipos que el usuario no seleccionó, para eso pensé en agregar los equipos en variables y luego en un array, pero al parecer no funciona porque no me muestra los equipos que el usuario seleccionó.

Código JS

   // MATCH 1
enfrentamiento1.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento1").appendChild(option);
  });
  // MATCH 2
  enfrentamiento2.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento2").appendChild(option);
  });
// MATCH 3
  enfrentamiento3.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento3").appendChild(option);
  });
// MATCH 4
  enfrentamiento4.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento4").appendChild(option);
  });
// MATCH 5
  enfrentamiento5.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento5").appendChild(option);
  });
// MATCH 6
  enfrentamiento6.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento6").appendChild(option);
  });
// MATCH 7
  enfrentamiento7.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento7").appendChild(option);
  });
// MATCH 8
  enfrentamiento8.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento8").appendChild(option);
  });
var enfrentamiento1 = ["Liverpool", "Leipzig"];
var enfrentamiento2 = ["Club Brugge", "Milan"];
var enfrentamiento3 = ["Eintracht", "Borussia Dortmund"];
var enfrentamiento4 = ["Inter", "PSG"];
var enfrentamiento5 = ["Real Madrid", "Manchester City"];
var enfrentamiento6 = ["Benfica", "Tottenham"];
var enfrentamiento7 = ["Napoli", "Chelsea"];
var enfrentamiento8 = ["Porto", "Bayern"];

//ROUND 2

var enfrentamiento1Seleccionado = document.getElementById("enfrentamiento1").value;
var enfrentamiento2Seleccionado = document.getElementById("enfrentamiento2").value;
var enfrentamiento3Seleccionado = document.getElementById("enfrentamiento3").value;
var enfrentamiento4Seleccionado = document.getElementById("enfrentamiento4").value;
var enfrentamiento5Seleccionado = document.getElementById("enfrentamiento5").value;
var enfrentamiento6Seleccionado = document.getElementById("enfrentamiento6").value;
var enfrentamiento7Seleccionado = document.getElementById("enfrentamiento7").value;
var enfrentamiento8Seleccionado = document.getElementById("enfrentamiento8").value;

var enfrentamientosRonda2 = [
  [enfrentamiento1Seleccionado, enfrentamiento2Seleccionado],
  [enfrentamiento3Seleccionado, enfrentamiento4Seleccionado],
  [enfrentamiento5Seleccionado, enfrentamiento6Seleccionado],
  [enfrentamiento7Seleccionado, enfrentamiento8Seleccionado]
];

for (var i = 0; i < enfrentamientosRonda2.length; i++) {
  var select1 = document.getElementById("enfrentamiento9");
  var equipo1 = enfrentamientosRonda2[i][0];
  var equipo2 = enfrentamientosRonda2[i][1];
  select1.options[select1.options.length] = new Option(equipo1, equipo2);
}

HTML

    <form>
<h2>Round 1</h2>
  <div>
    <label for="enfrentamiento1">Match 1:</label>
    <select id="enfrentamiento1">
  <option value="">Select a team </option>
</select>
 <div>
    <label for="enfrentamiento2">Match 2:</label>
    <select id="enfrentamiento2">
  <option value="">Select a team </option>
</select>
 <div>
    <label for="enfrentamiento3">Match 3:</label>
    <select id="enfrentamiento3">
  <option value="">Select a team </option>
</select>
 <div>
    <label for="enfrentamiento4">Match 4:</label>
    <select id="enfrentamiento4">
  <option value="">Select a team </option>
</select>
 <div>
    <label for="enfrentamiento5">Match 5:</label>
    <select id="enfrentamiento5">
  <option value="">Select a team </option>
</select>
 <div>
    <label for="enfrentamiento6">Match 6:</label>
    <select id="enfrentamiento6">
  <option value="">Select a team </option>
</select>
 <div>
    <label for="enfrentamiento7">Match 7:</label>
    <select id="enfrentamiento7">
  <option value="">Select a team </option>
</select>
 <div>
    <label for="enfrentamiento8">Match 8:</label>
    <select id="enfrentamiento8">
  <option value="">Select a team </option>
</select>

<h2>Round 2</h2>
<div>
  <label for="enfrentamiento9">Match 1:</label>
  <select id="enfrentamiento9">
    <option value="">Selecciona un equipo</option>
  </select>

  <label for="enfrentamiento10">Match 2:</label>
  <select id="enfrentamiento10">
    <option value="">Selecciona un equipo</option>
  </select>
</div>

<div>
  <label for="enfrentamiento11">Match 3:</label>
  <select id="enfrentamiento11">
    <option value="">Selecciona un equipo</option>
  </select>

  <label for="enfrentamiento12">Match 4:</label>
  <select id="enfrentamiento12">
    <option value="">Selecciona un equipo</option>
  </select>
</div>
</form>
3
  • 1
    No es evidente que el código se esté ejecutando cuando ya todo el documento haya sido procesado por el navegador. Sale algún error en la consola del navegador cuando corres tu código? Puedes editar y añadirlo
    – Alfabravo
    Commented el 6 mar. 2023 a las 19:47
  • Me dice esto. @Alfabravo 'Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')'
    – klazeg
    Commented el 6 mar. 2023 a las 19:48
  • Para la próxima se pone el error completo EN la pregunta como te indiqué. Editandola. En el comentario sale incompleto y es difícil de leer; piensa en qué pasaría si te responden con código acá.
    – Alfabravo
    Commented el 6 mar. 2023 a las 19:50

2 respuestas 2

2

Como no sabemos si tu código Javascript corre dentro de un archivo más grande y, teniendo en cuenta el error que parece que ves:

Tienes que hacer que el código JS espere a que se cargue todo el DOM (todo el documento, pues).

Para eso, tienes dos opciones básicas:

  • Pones tu script AL FINAL del body
<!doctype html>
<html>
<head>
</head>
<body>

<!-- todo tu form y esas cosas -->

<script>
// Tu lógica javascript
</script>

</body>
</html>

y lo encierras en un

document.addEventListener("DOMContentLoaded", function(event) {
    // Acá iría todo tu código JS
});
  • Usas JQuery, no importa cómo incluyas tu lóica JS, y encierras todo tu código con
$(document).ready(function() {
    //Acá va tu código JS
});
2

Cuando integras el ".forEach()", las variables todavia no estan iniciadas, por eso sale el error "reading properties of undefined", porque las declaras despues del ciclo forEach.

No puedes usar las variables antes de declararlas

El orden correcto seria:

var enfrentamiento1 = ["Liverpool", "Leipzig"];
var enfrentamiento2 = ["Club Brugge", "Milan"];
var enfrentamiento3 = ["Eintracht", "Borussia Dortmund"];
var enfrentamiento4 = ["Inter", "PSG"];
var enfrentamiento5 = ["Real Madrid", "Manchester City"];
var enfrentamiento6 = ["Benfica", "Tottenham"];
var enfrentamiento7 = ["Napoli", "Chelsea"];
var enfrentamiento8 = ["Porto", "Bayern"];

// MATCH 1
enfrentamiento1.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento1").appendChild(option);
});
// MATCH 2
enfrentamiento2.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento2").appendChild(option);
});
// MATCH 3
enfrentamiento3.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento3").appendChild(option);
});
// MATCH 4
enfrentamiento4.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento4").appendChild(option);
});
// MATCH 5
enfrentamiento5.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento5").appendChild(option);
});
// MATCH 6
enfrentamiento6.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento6").appendChild(option);
});
// MATCH 7
enfrentamiento7.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento7").appendChild(option);
});
// MATCH 8
enfrentamiento8.forEach(function(equipo) {
    var option = new Option(equipo, equipo);
    document.getElementById("enfrentamiento8").appendChild(option);
});
1
  • tomando en cuenta que si el codigo JS esta antes del HTML, esta linea document.getElementById("enfrentamiento3").appendChild(option); daria un error tambien
    – blurfus
    Commented el 6 mar. 2023 a las 20:50

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.