I need help with javaScript (I'm a beginner in programming). I have a list of players registered in the firebase and I need to connect each player with their respective time of proof. A player has id = player1 and has a time with id = timePlayer1 and so goes up to player8 / timePlayer8 and I need to list in order of time and for this I compare the value of each time, but it has to appear the time and the player of that time. follow the code I have here:
<form class="corrida" id="corrida">
<h5 class="center">Nova Corrida</h5>
<div class="row">
<div class="input-field col s6 offset-s3">
<input id="hora" type="text" class="validate black-text">
<label for="hora" class="black-text">Horário de partida</label>
</div>
<div class="col s6">
<select class="list browser-default" id="corredor1">
<option title="option"></option>
</select>
<label class="black-text">Box 1</label>
</div>
<div class="input-field col s6">
<input id="TempoCorredor1" type="text" class="validate black-text">
<label for="TempoCorredor1" class="black-text">Tempo de prova (Segundos)</label>
</div>
<div class="col s6">
<select class="list browser-default" id="corredor2">
<option title="option"></option>
</select>
<label class="black-text">Box 2</label>
</div>
<div class="input-field col s6">
<input id="TempoCorredor2" type="text" class="validate black-text">
<label for="TempoCorredor2" class="black-text">Tempo de prova (Segundos)</label>
</div>
<div class="col s6">
<select class="list browser-default" id="corredor3">
<option title="option"></option>
</select>
<label class="black-text">Box 3</label>
</div>
<div class="input-field col s6">
<input id="TempoCorredor3" type="text" class="validate black-text">
<label for="TempoCorredor3" class="black-text">Tempo de prova (Segundos)</label>
</div>
<div class="col s6">
<select class="list browser-default" id="corredor4">
<option title="option"></option>
</select>
<label class="black-text">Box 4</label>
</div>
<div class="input-field col s6">
<input id="TempoCorredor4" type="text" class="validate black-text">
<label for="TempoCorredor4" class="black-text">Tempo de prova (Segundos)</label>
</div>
<div class="col s6">
<select class="list browser-default" id="corredor5">
<option title="option"></option>
</select>
<label class="black-text">Box 5</label>
</div>
<div class="input-field col s6">
<input id="TempoCorredor5" type="text" class="validate black-text">
<label for="TempoCorredor5" class="black-text">Tempo de prova (Segundos)</label>
</div>
<div class="col s6">
<select class="list browser-default" id="corredor6">
<option title="option"></option>
</select>
<label class="black-text">Box 6</label>
</div>
<div class="input-field col s6">
<input id="TempoCorredor6" type="text" class="validate black-text">
<label for="TempoCorredor6" class="black-text">Tempo de prova (Segundos)</label>
</div>
<div class="col s6">
<select class="list browser-default" id="corredor7">
<option title="option"></option>
</select>
<label class="black-text">Box 7</label>
</div>
<div class="input-field col s6">
<input id="TempoCorredor7" type="text" class="validate black-text">
<label for="TempoCorredor7" class="black-text">Tempo de prova (Segundos)</label>
</div>
<div class="col s6">
<select class="list browser-default" id="corredor8">
<option title="option"></option>
</select>
<label class="black-text">Box 8</label>
</div>
<div class="input-field col s6">
<input id="TempoCorredor8" type="text" class="validate black-text">
<label for="TempoCorredor8" class="black-text">Tempo de prova (Segundos)</label>
</div>
</div>
<div class="row">
<div class="col s12">
<select class="list browser-default" id="Juiz">
<option title="option"></option>
</select>
<label class="black-text">Juíz da Corrida</label>
</div>
<div class="input-field col s12">
<textarea id="Observacao" class="materialize-textarea"></textarea>
<label for="Observacao" class="black-text">Observações do Juíz</label>
</div>
</div>
</div>
<div class="row">
<div class="col s12 center">
<button class="btn waves-effect waves-light" type="submit">Enviar</button>
</div>
</div>
<br>
</form>
atletasList();
function atletasList() {
var tbody = document.querySelector("#table-body");
var rootRef = firebase.database().ref();
rootRef.child('corredor').on('value', function (snapshot) {
tbody.innerHTML = '';
snapshot.forEach(function (item) {
var linha = document.createElement('tr');
var tdNome = document.createElement('td');
var tdIdade = document.createElement('td');
var tdTempo = document.createElement('td');
var tdData = document.createElement('td');
var ul = document.createElement('ul');
var ulData = document.createElement('ul');
tdNome.appendChild(document.createTextNode(item.val().nome));
tdIdade.appendChild(document.createTextNode(item.val().idade));
tdTempo.appendChild(document.createTextNode(item.val().tempo));
tdData.appendChild(document.createTextNode(item.val().data));
if (item.child('corredores').val()) {
var chaves = Object.keys(item.child('corredores').val());
console.log(chaves);
for (var i = 0; i < chaves.length; i++) {
rootRef.child('corredor/'+chaves[i]).once('value', function (snap) {
var li = document.createElement('li');
var liData = document.createElement('li');
li.appendChild(document.createTextNode(snap.val().idade));
liData.appendChild(document.createTextNode(snap.val().data));
ul.appendChild(li);
ulData.appendChild(liData);
});
}
}
tdTempo.appendChild(ul);
tdData.appendChild(ulData)
linha.appendChild(tdNome);
linha.appendChild(tdIdade);
linha.appendChild(tdTempo);
linha.appendChild(tdData);
tbody.appendChild(linha);
});
});
}