on newrankrank change if class newranknameselect have "active" on that class make alert "there is active"
document.addEventListener('change', function(event) {
// Check if the changed element is the tourney name dropdown
if (event.target.classList.contains('newtourneynamedropdown')) {
let dropdown = event.target;
let selectedOptionText = dropdown.options[dropdown.selectedIndex].value;
// Find the closest ancestor row (<tr>) that contains the dropdown
let row = dropdown.closest('tr');
if (row) {
// Find the participant number input within the same row
let participantInput = row.querySelector('.newtourneynumparticipantselect');
if (participantInput) {
// Update the participant input's value with the selected dropdown text
participantInput.value = selectedOptionText; // Or use a value associated with the option if needed
// For example, if you store the participant count in a data attribute:
// participantInput.value = dropdown.options[dropdown.selectedIndex].dataset.participants || '';
} else {
console.error('Could not find the .newtourneynumparticipantselect input near the dropdown.');
}
} else {
console.error('Could not find the parent row for the dropdown.');
}
}
if (event.target.classList.contains('newrankrank')) {
let tournumparticipant = event.target;
let numbertournumparticipant = tournumparticipant.value;
let newRankRow = tournumparticipant.closest('tr.newrank');
let pointsInput = newRankRow.querySelector('.newpoints');
let participantSelectInput = newRankRow.querySelector('.newtourneynumparticipantselect');
let participantNewInput = newRankRow.querySelector('.newtourneynumparticipantnew');
let xmarkmode = newRankRow.querySelector('tr.newranknamenew');
let keyboardmode = newRankRow.querySelector('tr.newranknameselect');
// pointsInput.style.visibility = 'collapse';
// participantSelectInput.style.visibility = 'collapse';
// participantNewInput.style.visibility = 'collapse';
}
});
const row = `
<tr>
<td class="rankplayer">
${user.name}
<span class="icon"><i class="fa-solid fa-circle-plus btn_row_below_new"></i></span>
<span class="icon"><i class="fa-regular fa-pen-to-square btn_row_below_update"></i></span>
</td>
<td class="rankcount">${count}</td>
<td class="rankpoint">${points}</td>
<td class="rankid" style="visibility: collapse;">${user.ID}</td>
</tr>
<tr class="newrank" style="visibility: collapse;">
<td colspan="4" >
<table>
<tr>
<td class="newrankidid" style="visibility: collapse;">${user.ID}</td>
<td>
<table>
<tr>
<td>
<table>
<tr class="newranknamenew">
<td>
<span class="icon"><i class="fa-solid fa-circle-xmark"></i></span>
</td>
</tr>
<tr class="newranknameselect active">
<td>
<span class="icon"><i class="fa-solid fa-keyboard"></i></span>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr class="newranknamenew">
<td>
<input type="text" class="newtourneyname" placeholder="Tourney Name" required>
<input type="number" class="newtourneynumparticipantnew" placeholder="Number Participant" min="1" required>
</td>
</tr>
<tr class="newranknameselect active">
<td>
<select class="newtourneynamedropdown" name="newtourneynamedropdown" >
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="text" class="newtourneynumparticipantselect" placeholder="Number Participant" disabled>
</td>
</tr>
</table>
</td>
</tr>
</table>
<td>
<td><input type="number" class="newrankrank" placeholder="Rank" required></td>
<td><input type="number" class="newpoints" placeholder="Points" required></td>
<td class="newsubmit">
<span class="icon"><i class="fa-solid fa-circle-plus btn_row_new_submit"></i></span>
<label class="newsubmitstatus" style="visibility: hidden;">Status</label>
</td>
</tr>
</table>
</td>
</tr>
${playerEvents.map(pe => `
<tr class="updaterank" style="visibility: collapse;">
<td colspan="6" >
<table>
<tr>
<td class="updaterankidid" style="visibility: collapse;">${pe.users_id}</td>
<td class="updaterankeventid" style="visibility: collapse;">${pe.event_id}</td>
<td>
Tourney Name : <input type="text" class="updatetourneyname" placeholder="Tourney Name" value="${pe.tourneyname}" required>
</td>
<td>
Rank : <input type="number" class="updaterank" placeholder="Rank" value="${pe.rank}" required>
</td>
<td>
Points : <input type="number" class="updatepoints" placeholder="Points" value="${pe.points}" required>
</td>
<td class="updatesubmit">
<span class="icon"><i class="fa-regular fa-pen-to-square btn_row_update_submit"></i></span>
<label class="updatesubmitstatus" style="visibility: hidden;">Status</label>
</td>
</tr>
</table>
</td>
</tr>
`).join('')}
`;
tbody.insertAdjacentHTML('beforeend', row);