how to get value from specific css class using javascript

Question

Below is countdown timer. is it possible get value "1:32" every time the value update using javascript from a html which contain below

01:32

Answer 1

Using getElementsByClassName and querySelector. Note that getElementsByClassName return a list so is neccesary access to the first list position.

var text = document.getElementsByClassName("myClass")[0].innerHTML; 
console.log(text)

text = document.querySelector(".myClass").innerHTML
console.log(text)

<span class = myClass>text</span>

Also, I've used class but you can use other value to match with your html element.

Answer 2

You can select the element using document.querySelectorAll and get the value inside span tag using innerHTML as follows.

document.querySelectorAll("[data-reactid='.1.0.0.0.1.0']").innerHTML

Answer 3

You could use either:

getAttribute() method of the Element interface returns the value of a specified attribute on the element.

var badgeTimer = document.querySelector('.vsm-badge-timer');
let reacid=badgeTimer.getAttribute('data-reacid');

The dataset property on the HTMLElement interface provides read/write access to all the custom data attributes (data-*) set on the element. This access is available both in HTML and within the DOM.

var badgeTimer = document.querySelector('.vsm-badge-timer');
let reacid=badgeTimer.dataset['reacid'];

Answer 4

If you want to get the first element's text of the class then you can try the following:

var data = document.querySelector('span.vsm-badge-timer').textContent;

If you have multiple elements with the class then you have get all the elements using querySelectorAll() and iterate them to take the value individually:

var all = document.querySelectorAll('span.vsm-badge-timer');
all.forEach(function(el){
  var data = el.textContent;
});