Problems with numerical operations and Javascript Nodelists

Asked

Viewed 32 times

-1

I’m doing a simple summing function, which takes 2 html numbers, sums and should include a div for the result.

<section class="container">
            <h1 class="title">Somando os valores 
                <p class="firstNumber">1<p>
                e valor 
                <p class="secondNumber">2<p>
            </h1>
            <h2 class="results">Resultados:  
            </h2>
        </section>

let firstNumber = document.querySelectorAll(".firstNumber");
let secondNumber = document.querySelectorAll(".secondNumber");
let resultsDiv = document.querySelectorAll(".results")[0];

function createResults(text, result, className) {
    console.log("result" + result);
    const newDiv = document.createElement('p');
    newDiv.className = className;
    newDiv.textContent = text + result;
    resultsDiv.appendChild(newDiv)
}

let secondSumMethod = (x, y) => {
    return x + y
}
let secondSumMethodResult = secondSumMethod(firstNumber, secondNumber);
createResults("second sum method: ", secondSumMethodResult, secondSumMethodClassName);

But when I try to get the result that in the case should be a number, I’m getting the following:

second sum method:[object NodeList][object NodeList]

I’ve tried to do result[0] and it didn’t work either, so I tried to create a method

result = nodeToArray(result);
function nodeToArray(result) {
    for (i = 0; i < result.length; i++) {
        console.log(result[i]);
    }
    return Array.from(result);
}

But then he returned:

[,o,b,j,e,c,t, ,N,o,d,e,L,i,s,t,],[,o,b,j,e,c,t, ,N,o,d,e,L,i,s,t,]

What would be missing from my code?

  • 2

    Just telling you, document.querySelectorAll returns a arraylist of NodeList, if you want to "catch" the contents of the first element do document.querySelectorAll(".firstNumber")[0].textContent, if you want to perform mathematical operations, convert from string for number using the +: let firstNumber = +document.querySelectorAll(".firstNumber")[0].textContent;

  • 1

    That’s right, thank you very much !

1 answer

0


With the help of the comments I was able to adjust the code. The problem was in selecting the numbers that were occurring so that they would stay in a Nodelist:

let firstNumber = document.querySelectorAll(".firstNumber");
let secondNumber = document.querySelectorAll(".secondNumber");
let resultsDiv = document.querySelectorAll(".results")[0];

With the section below it was run so that the value of the numbers was converted to String and so could perform the operations

let firstNumber = +document.querySelectorAll(".firstNumber")[0].textContent;
let secoundNumber = +document.querySelectorAll(".secoundNumber")[0].textContent;
let resultsDiv = document.querySelectorAll(".results")[0];

More optimized:

let firstNumber = parseInt(document.querySelector(".firstNumber").textContent); 
let secoundNumber = parseInt(document.querySelector(".secoundNumber").textContent);
let resultsDiv = document.querySelector(".results");

Thank you !

  • 3

    Remember that using document.querySelectorAll to obtain only the first element is a overhead unnecessary because it is causing the browser to search all elements to finally index only the first. Use document.querySelector so that the browser only looks for the first element in the DOM.

  • 3

    I would also argue that the use of parseInt is more appropriate than the +, since the + has a slightly higher "permissiveness". There are a number of questions and answers here at Sopt that talk about these differences. If you’re interested, do a little research, you’ll find a lot of cool information. :-)

  • 1

    Thank you so much for the tips, I will adjust in the code

Browser other questions tagged

You are not signed in. Login or sign up in order to post.