javascript – Get Winning Team Result

Question:

I have a case where the highest score is calculated and the winning team is obtained.
1 – user enters the teams.
2 – user enters score.
The result is to obtain the highest score and the winning team.

So far I am getting the highest result, but I am having trouble getting the winning team from the input .

This is my HTML .

function Calcular() {
  var p1 = document.getElementById('p1').value;
  p1 = parseInt(p1);
  var p2 = document.getElementById('p2').value;
  p2 = parseInt(p2);
  var p3 = document.getElementById('p3').value;
  p3 = parseInt(p3);

  var p = [p1, p2, p3];

  var mayor = null;
  var ganador = null;

  for (var i = 0; i < p.length; i++) {
    if (mayor < p[i]) {
      mayor = p[i]
    }
  }

  document.getElementById('resultado').innerHTML = mayor;
}
<table>
  <tr>
    <td><label>Equipos:</label></td>
    <td><input type="text" name="txtequipo1" id="equipo1"></td>
    <td><label>Puntaje :</label></td>
    <td>
      <select name="cbotipo" id="p1">
        <option>10</option>
        <option>20</option>
        <option>30</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><label>Equipos:</label></td>
    <td><input type="text" name="txtequipo2" id="equipo2"></td>
    <td><label>Puntaje :</label></td>
    <td>
      <select name="cbotipo" id="p2">
        <option>10</option>
        <option>20</option>
        <option>30</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><label>Equipos:</label></td>
    <td><input type="text" name="txtequipo3" id="equipo3"></td>
    <td><label>Puntaje :</label></td>
    <td>
      <select name="cbotipo" id="p3">
        <option>10</option>
        <option>20</option>
        <option>30</option>
      </select>
    </td>
  </tr>
  <tr>
    <td><label>Resultado</label></td>
    <td><label id="resultado"></label></td>
  </tr>
</table>
<div class="cont-controles">
  <input type="submit" name="btnBoton" value="calcular Puntaje " class="btn-buscar" onclick="Calcular()" />
</div>

Answer:

You can do it like this:

 function Calcular() { // seleccionamos todos los elementos que select que empiezen con el id p "p1" "p2" etc. var p = document.querySelectorAll('select[id^="p"]'); var mayor = 0; var ganador = 0; for (var i = 0; i < p.length; i++) { if (mayor < p[i].value) { mayor = p[i].value; // selecctionamos al padre del select "td" y luego a su padre "tr" // a partir de ahi buscamos un input y optenemos su valor ganador = p[i].parentElement.parentElement.querySelector("input").value; } } document.getElementById('resultado').innerHTML = "ganador es " + ganador + " con: " + mayor; }
 <table> <tr> <td><label>Equipos:</label></td> <td><input type="text" name="txtequipo1" id="equipo1"></td> <td><label>Puntaje :</label></td> <td> <select name="cbotipo" id="p1"> <option>10</option> <option>20</option> <option>30</option> </select> </td> </tr> <tr> <td><label>Equipos:</label></td> <td><input type="text" name="txtequipo2" id="equipo2"></td> <td><label>Puntaje :</label></td> <td> <select name="cbotipo" id="p2"> <option>10</option> <option>20</option> <option>30</option> </select> </td> </tr> <tr> <td><label>Equipos:</label></td> <td><input type="text" name="txtequipo3" id="equipo3"></td> <td><label>Puntaje :</label></td> <td> <select name="cbotipo" id="p3"> <option>10</option> <option>20</option> <option>30</option> </select> </td> </tr> <tr> <td><label>Resultado</label></td> <td><label id="resultado"></label></td> </tr> </table> <div class="cont-controles"> <input type="submit" name="btnBoton" value="calcular Puntaje " class="btn-buscar" onclick="Calcular()" /> </div>
Post Views: 0
Scroll to Top