let rangeValues = document.querySelectorAll("input[type='range']");
//check if inputs exceed 200
function checkInputs(e, s){
    if (e+s > 200) {
    alert('The sum of Option A and Option B must not exceed 200!\nYour input has been set at the highest possible value.')
    return false
    }
    else {
    return true
    }
}

//since for loop is not working for Event Listeners in Javascript, I individually add all the events for the inputs.
//pair numbers are for effort and impair numbers for sabotage. Firsts, take sabotage from the slider afterwards,
//The latter take effort from the slider before.
//REDUCE THE AMOUNT HERE IN THE N=3 TREATMENT.
//N=1
rangeValues[0].addEventListener('click', a => {
    if(checkInputs(Number(a.target.value), Number(rangeValues[1].value)) == false){
        document.querySelectorAll("input[type='number']")[0].value=200-rangeValues[1].value;
        document.querySelectorAll("input[type='range']")[0].value=200-rangeValues[1].value;
    }
});
rangeValues[1].addEventListener('click', a => {
    if(checkInputs(Number(rangeValues[0].value), Number(a.target.value) ) == false){
        document.querySelectorAll("input[type='number']")[1].value=200-rangeValues[0].value;
        document.querySelectorAll("input[type='range']")[1].value=200-rangeValues[0].value;
    }
});
//N=2
rangeValues[2].addEventListener('click', a => {
    if(checkInputs(Number(a.target.value), Number(rangeValues[3].value)) == false){
        document.querySelectorAll("input[type='number']")[2].value=200-rangeValues[3].value;
        document.querySelectorAll("input[type='range']")[2].value=200-rangeValues[3].value;
    }
});
rangeValues[3].addEventListener('click', a => {
    if(checkInputs(Number(rangeValues[2].value), Number(a.target.value) ) == false){
        document.querySelectorAll("input[type='number']")[3].value=200-rangeValues[2].value;
        document.querySelectorAll("input[type='range']")[3].value=200-rangeValues[2].value;
    }
});
//N=3;
rangeValues[4].addEventListener('click', a => {
    if(checkInputs(Number(a.target.value), Number(rangeValues[5].value)) == false){
        document.querySelectorAll("input[type='number']")[4].value=200-rangeValues[5].value;
        document.querySelectorAll("input[type='range']")[4].value=200-rangeValues[5].value;
    }
});
rangeValues[5].addEventListener('click', a => {
    if(checkInputs(Number(rangeValues[4].value), Number(a.target.value) ) == false){
        document.querySelectorAll("input[type='number']")[5].value=200-rangeValues[4].value;
        document.querySelectorAll("input[type='range']")[5].value=200-rangeValues[4].value;
    }
});
//N=4;
rangeValues[6].addEventListener('click', a => {
    if(checkInputs(Number(a.target.value), Number(rangeValues[7].value)) == false){
        document.querySelectorAll("input[type='number']")[6].value=200-rangeValues[7].value;
        document.querySelectorAll("input[type='range']")[6].value=200-rangeValues[7].value;
    }
});
rangeValues[7].addEventListener('click', a => {
    if(checkInputs(Number(rangeValues[6].value), Number(a.target.value) ) == false){
        document.querySelectorAll("input[type='number']")[7].value=200-rangeValues[6].value;
        document.querySelectorAll("input[type='range']")[7].value=200-rangeValues[6].value;
    }
});
//N=5;
rangeValues[8].addEventListener('click', a => {
    if(checkInputs(Number(a.target.value), Number(rangeValues[9].value)) == false){
        document.querySelectorAll("input[type='number']")[8].value=200-rangeValues[9].value;
        document.querySelectorAll("input[type='range']")[8].value=200-rangeValues[9].value;
    }
});
rangeValues[9].addEventListener('click', a => {
    if(checkInputs(Number(rangeValues[8].value), Number(a.target.value) ) == false){
        document.querySelectorAll("input[type='number']")[9].value=200-rangeValues[8].value;
        document.querySelectorAll("input[type='range']")[9].value=200-rangeValues[8].value;
    }
});