Recovery data in client side using selectors — JavaScript

Question

Good night,

I'm having trouble retrieving the tag value;

let salarys = document.querySelectorAll('#salarys');

//return => NodeList(9) [p#salarys, p#salarys, p#salarys, p#salarys, p#salarys, p#salarys, 
p#salarys, p#salarys, p#salarys].

when I access the vector at position 0

it return

<p id="salarys" value="R$ 6.000,00"></p>

My problem is I can't get the value

when i use script

 console.log(salarys[0].value);
 // return undefined

I can't understand why it happens...

i need recovery all salarys value.

Thanks =)

Answer 1

try this:

let salarys = document.querySelectorAll('#salarys');
console.log(salarys[0].getAttribute("value"));

Answer 2

The p element does not have a value attribute. If you want to make a custom attribute , you can prefix the attribute name with data- , like:

 const salarys = document.getElementById("salarys"), val = salarys.dataset.value; // Access data-properties via `dataset` console.log(val);

 <p id="salarys" data-value="R$ 6.000,00"></p>

Alternatively, if you want to use the text that appears to the user within the paragraph element, this is available in the textContent property:

 const salarys = document.getElementById("salarys"), text = salarys.textContent; console.log(text);

 <p id="salarys">R$ 6.000,00</p>