Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to uncheck a multiple selector and perform the subtraction with js?

I have three drop-downs. Each time you select an item from the dropdown-list, it is added to the total value and it is displayed below in a label. When the user clicks on the 'X' of the label, the label is removed and the value of the item should be substracted from the dropdown-list. However, it isn't substracted.

This is link where I have the form:

https://codepen.io/MoisosxD/pen/gOPpXGQ

You see to remove the label I have it like this:

onclick="desmarcarspan1();"

dentro del js así:

function desmarcarspan1(){
        var total = document.getElementById("totalGeneral");
        var total1 = new Array(total);
        var NuevoTotal = total.textContent;
        console.log(total.textContent);
        var ans10 = document.getElementById("ans-10");
        ans10.style.display = "none";
    }

But I have not done anything else I do not know how to do the subtraction and to uncheck the selector.

like image 538
Moises Pachon Avatar asked Jan 20 '26 09:01

Moises Pachon


1 Answers

If you make the function sumValues() global, you can just decheck the dropdown-element and call the function then:

sumValues():

function sumValues() {
    const inputArray = document.querySelectorAll('input.itemTotalNeto');
    console.log(inputArray);
    const totalValue = document.querySelector('#totalGeneral');
    let cboxVals = 0;
    inputArray.forEach(element => cboxVals += element.checked ? parseInt(element.value, 10) : 0);
    totalValue.innerHTML = cboxVals;
}

desmarcspan1():

function desmarcarspan1() {

    //decheck the dropdown-element:
    document.getElementById('check-1').checked = false;

    //sum up values again
    sumValues();

    var total = document.getElementById("totalGeneral");
    var total1 = new Array(total);
    var NuevoTotal = total.textContent;
    console.log(total.textContent);
    const totalValue = document.querySelector('#totalGeneral');
    var ans1 = document.getElementById("ans-1");
    ans1.style.display = "none";
}

See this working example: https://codepen.io/PhoenixFlight/pen/eYJNMYm

like image 104
Philip F. Avatar answered Jan 22 '26 22:01

Philip F.