使用 javascript 从跨度（不是文本）中获取值

Question

I am attempting to grab the value of a span attribute but am only successful so far in grabbing the text (which I don't need in this case).

 // I want the value to return "10" myValue = document.querySelector(".count-total").getElementByID("data-multiply") console.log(myValue)

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 1

Target the span with querySelector , and then get the multiply value from the dataset .

 const span = document.querySelector('.count-total span'); console.log(span.dataset); const val = span.dataset.multiply; console.log(val);

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 2

Use the dataset attribute: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

 const node = document.querySelector(".count-total span[data-multiply]") console.info(node.dataset.multiply)

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 3

.getElementByID("data-multiply") is neither syntactically correct nor will it get the data attribute

it is spelled getElementById but is used when an element has an ID

You need to use the querySelector with the complete path and use the dataset property

 // I want the value to return "10" const myValue = document.querySelector(".count-total span").dataset.multiply; console.log(myValue)

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>

Answer 4

getElementById (note the lower case d at the end) looks for an element with a matching id="xyz" value. None of your elements has an id .

Assuming the span with data-multiply is the only (or at least first) element with that data-* attribute, you can find it with querySelector using an attribute selector ( [data-multiply] ) and read its attribute value via getAttribute or dataset :

 const element = document.querySelector("[data-multiply]"); const myValue = element.getAttribute("data-multiply"); console.log(myValue); const myValue2 = element.dataset.multiply; console.log(myValue2);

 <div class="count-total"> <span data-multiply="10">20 Doses</span> </div>