Help with HTML collection

1

So i have a problem i have some code that returns an html collection but thats not an array. It looks something like this.

<!-- HTML Element-->
<p class ='x'>12.99</p>

// JS Code
const btn = document.querySelector('button');

btn.addEventListener('click', () => {
 let x = document.querySelector('.x');
console.log(x);
})

This logs the paragraph element. But when I try and parseInt or parseFloat x it return NaN. I just want to know why? Even if i try to console log x’s value. ( Like console.log(x.value) it returns undefined) Just trying to identify what i am doing wrong.

2

x is an object representing an HTML node. You can’t convert an object to a number, doesn’t make sense.

The value property relates to inputs, like the value of a text input. This is a p element, it doesn’t have a value. Try logging x and looking at the object to see which property you want

3

First there is no button element in your code so

we don’t know what this refers to.

But your query returns the first button element. Is that what you want to target , can’t tell from your code.

Second , what you think is a number is a string.

4

I was just using part of my code and i shouldve added it but i was only just trying to get an idea of what i was doing wrong with the event listener code.

yes i am returning the first element button in this case and i am trying to get the value of the p element. But when i return it returns the node.

It is not returning the string value but the node its self and when i use typeof on it instead of returning a string value that i can use parseFloat on it returns it as
just object in console.

5

I did log it in the console and it gives me the following:

<p class="x">12.99</p>

and when i console log it to find the methods i can use it just says object nothing else. When i console.log it i do it as:

console.log(typeof x);

Sorry if im making this more difficult.

6

And if you expand that name in the console by clicking on the little arrow next to it?

typeof just tells you the type of something (object, string, boolean etc.), that’s all

7

When I look at it in the console it doesnt give me an option to look at what I can do with it. Just logs the html element.

Should I just get the text that p has with .innerText or text content instead and make that the variable?

8

I’m not sure how to do it in other browsers, but in the Firefox console like @DanCouper said you can click the arrow next to the element to expand it, then you can access what you need with dot notation like x.innerText if you want to access “12.99”, which is a string. If it needs to be a number you’ll have to convert it to a number.

9

The problem was that when i looked into the console I wasnt able to find what i could do with it. But I was trying to convert the html returned element into an integer. I just got home and i came to find what i typed earlier was the solution. Like:

let x = parseFloat(document.querySelector('.x').innerText);

But thank you so much. I made this account yesterday and you guys helped me so much. I’ve never been on a forum before, so I was initially afraid to post.

1 Like