The options do not change on the cell phone, only on the computer

I created a function in javascript, where it changes the number of options in the select according to the value that I selected in the previous select. This works normally on the computer, however when I use it on my phone and other people’s, this function does not work

these are the selects:

<select class='opcoes' id="pecasDoJogo-1Auto" onchange="getValue('pecasDoJogo-1Auto')" onclick="changeQuantityOfOptions('pecasDoJogo-1Auto','pecasDoJogo-1TeleOp')">
                        <option value="0" >0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select> 

<select class='opcoes' id="pecasDoJogo-1TeleOp" onchange="getValue('pecasDoJogo-1TeleOp')" onclick="changeQuantityOfOptions('pecasDoJogo-1TeleOp','pecasDoJogo-1Auto')">
                        <option value="0">0</option>
                        <option value="1" >1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select> 

These are the functions I’m using:

function getValue(nameId){
    return parseInt(document.getElementById(nameId).value)
}

function changeQuantityOfOptions(yourId,ReferenceId){
        const quantidade = 9 - parseInt(document.getElementById(yourId).value)
        const select = document.getElementById(ReferenceId)
        select.innerHTML = ""
        for(var i = 0; i <= quantidade; i++){
            select.innerHTML += `<option value="${i}">${i}</option>`
        }
}```

>Solution :

You should call your function only onchange, not onclick.

function getValue(nameId){
    return parseInt(document.getElementById(nameId).value)
}

function changeQuantityOfOptions(yourId,ReferenceId){
        const quantidade = 9 - parseInt(document.getElementById(yourId).value)
        const select = document.getElementById(ReferenceId)
        select.innerHTML = ""
        for(var i = 0; i <= quantidade; i++){
            select.innerHTML += `<option value="${i}">${i}</option>`
        }
}
<select class='opcoes' id="pecasDoJogo-1Auto" onchange="changeQuantityOfOptions('pecasDoJogo-1Auto','pecasDoJogo-1TeleOp')">
                        <option value="0" >0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select> 

<select class='opcoes' id="pecasDoJogo-1TeleOp" onchange="changeQuantityOfOptions('pecasDoJogo-1TeleOp','pecasDoJogo-1Auto')">
                        <option value="0">0</option>
                        <option value="1" >1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                    </select> 

Leave a Reply