How to add two input text fields?

Question

I am unable to add the value that are added in two input text fields. I have an HTML table that columns have fields to fill, the last field is the sum total of the other fields. But I’m not getting the sum, follow a piece of HTML and JS:

HTML

<tr class="atividade" id="primeira-atividade">
                        <td class="info-mktplace"><select name="listaMarketplaces">
                            <option value="valor1">Amazon</option> 
                            <option value="valor2" selected>Mercado Livre</option>
                            <option value="valor3">Wish</option>
                            <option value="valor4">Garbarino</option> 
                        </td>
                        <td><input class="info-num" type="text" name="fnum" size ="3"></td>
                        <td><input class="info-perdaFin" type="text" name="fperdaFin" size ="2" onchange="soma()"></td>
                        <td><input class="info-perdaMarca" type="text" name="fperdaMarca" size ="2" onchange="soma()"></td>
                        <td><input class="info-sellersImpactados" type="text" name="fsellersImpactados" size ="2" onchange="soma()"></td>
                        <td><input class="info-insat" type="text" name="finsat" size ="2" onchange="soma()"></td>
                        <td><input class="info-sustentabilidade" type="text" name="fsustentabilidade" size ="2" onchange="soma()"></td>
                        <td><input class="info-facilidade" type="text" name="ffacilidade" size ="2" onchange="soma()"></td>
                        <td><input class="info-impedimento" type="text" name="fimpedimento" size ="2" onchange="soma()"></td>
                        <td><input class="info-fatorAjuste" type="text" name="ffatorAjuste" size ="2" onchange="soma()"></td>
                        <td><input class="info-tot" type="text" name="ftot" size ="2" onchange="soma()"></td>
                    </tr>

JS

function soma(){
//debugger;           

var tdPerdaFin = Number(document.querySelector(".info-perdaFin").value);
var perdaFin = tdPerdaFin.textContent;

var tdPerdamarca = Number(document.querySelector(".info-perdaMarca").value);
var perdaMarca = tdPerdamarca.textContent;

var tdSellerImpactados = Number(document.querySelector(".info-sellersImpactados").value);
var sellersImpactados = tdSellerImpactados.textContent;

var tdInsat = Number(document.querySelector(".info-insat").value);
var insat = tdInsat.textContent;

var tdSustentabilidade = Number(document.querySelector(".info-sustentabilidade").value);
var sustentabilidade = tdSustentabilidade.textContent;

var tdFacilidade = Number(document.querySelector(".info-facilidade").value);
var facilidade = ttdFacilidade.textContent;

var tdImpedimento = Number(document.querySelector(".info-impedimento").value);
var impedimento = dImpedimento.textContent;

var tdFatorAjuste = Number(document.querySelector(".info-fatorAjuste").value);
var fatorAjuste = tdFatorAjuste.textContent;

var total = Number(document.querySelector(".info-tot").value);
total = perdaFin + perdaMarca + sellersImpactados + insat + sustentabilidade + facilidade + impedimento + fatorAjuste;

}

Answer 1

Well, you took the typed numbers and then you put the .textContent I don’t know why. They were already in number form because of the Number()

Apart from that, I added so that the sum would be shown in the last input. In addition, some of your variables had a different name than the one used at the end, such as the case of var facilidade and var impedimento.

function soma(){
//debugger;           

var tdPerdaFin = Number(document.querySelector(".info-perdaFin").value);
var perdaFin = tdPerdaFin;

var tdPerdamarca = Number(document.querySelector(".info-perdaMarca").value);
var perdaMarca = tdPerdamarca;

var tdSellerImpactados = Number(document.querySelector(".info-sellersImpactados").value);
var sellersImpactados = tdSellerImpactados;

var tdInsat = Number(document.querySelector(".info-insat").value);
var insat = tdInsat;

var tdSustentabilidade = Number(document.querySelector(".info-sustentabilidade").value);
var sustentabilidade = tdSustentabilidade;

var tdFacilidade = Number(document.querySelector(".info-facilidade").value);
var facilidade = tdFacilidade;

var tdImpedimento = Number(document.querySelector(".info-impedimento").value);
var impedimento = tdImpedimento;

var tdFatorAjuste = Number(document.querySelector(".info-fatorAjuste").value);
var fatorAjuste = tdFatorAjuste;

var total = perdaFin + perdaMarca + sellersImpactados + insat + sustentabilidade + facilidade + impedimento + fatorAjuste;

document.querySelector(".info-tot").value = total;

}

<tr class="atividade" id="primeira-atividade">
                        <td class="info-mktplace"><select name="listaMarketplaces">
                            <option value="valor1">Amazon</option> 
                            <option value="valor2" selected>Mercado Livre</option>
                            <option value="valor3">Wish</option>
                            <option value="valor4">Garbarino</option> 
                        </td>
                        <td><input class="info-num" type="text" name="fnum" size ="3"></td>
                        <td><input class="info-perdaFin" type="text" name="fperdaFin" size ="2" onchange="soma()"></td>
                        <td><input class="info-perdaMarca" type="text" name="fperdaMarca" size ="2" onchange="soma()"></td>
                        <td><input class="info-sellersImpactados" type="text" name="fsellersImpactados" size ="2" onchange="soma()"></td>
                        <td><input class="info-insat" type="text" name="finsat" size ="2" onchange="soma()"></td>
                        <td><input class="info-sustentabilidade" type="text" name="fsustentabilidade" size ="2" onchange="soma()"></td>
                        <td><input class="info-facilidade" type="text" name="ffacilidade" size ="2" onchange="soma()"></td>
                        <td><input class="info-impedimento" type="text" name="fimpedimento" size ="2" onchange="soma()"></td>
                        <td><input class="info-fatorAjuste" type="text" name="ffatorAjuste" size ="2" onchange="soma()"></td>
                        <td><input class="info-tot" type="text" name="ftot" size ="2" onchange="soma()" disabled></td>
                    </tr>