0

I am not able to find how to get the value of span(80.40) from the below given html.

<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del>
  <span>$80.40</span>
</div>

This is my company websites code and i dont have access to edit anything. I have to incorporate a new feature using a google tag manager and for that i needed the value in span element. I tried some options mentioned below.

$(".col-xs-4 service-fee-total totals cart-total text-right cart-highlight span").text()

document.getElementsByClassName("col-xs-4 service-fee-total totals cart-total text-right cart-highlight");
Kanchan Jha
  • 64
  • 9
  • This seems both a relatively simple task (if you know how to do it, of course) and simple to search for. Can you please post your best attempts and explain how they failed for you? – David Thomas Aug 07 '18 at 14:25
  • What did you try? – j08691 Aug 07 '18 at 14:25
  • Give the span an id and grab it – Rastalamm Aug 07 '18 at 14:25
  • Get reference to the DOM element div and search through its children, or get reference to span directly (is it the only span on your page?) – justMe Aug 07 '18 at 14:25
  • You need to define an ID: Check this: https://stackoverflow.com/questions/12051898/how-to-get-span-value – Simion Aug 07 '18 at 14:27
  • 2
    @Simion no, no he doesn't – j08691 Aug 07 '18 at 14:27
  • 3
    The syntax of what you said you tried is incorrect. Spaces between selector elements refer to descendant elements, not one element with all those classes. You need to put periods between the class names and remove the spaces. E.g. `$(".col-xs-4.service-fee-total.totals.cart-total.text-right.cart-highlight span")`. This is jQuery/JavaScript 101 stuff that most good tutorials will cover early on and that the documentation clearly goes over. – j08691 Aug 07 '18 at 14:34
  • 2
    What? Why was this closed as too broad? Seems like a very clear and specific question to me...as the clear and concise answers demonstrate. – Ben Lee Aug 07 '18 at 18:01

4 Answers4

3

You can use document.querySelector in order to locate the span and innerHTML for getting the value like this:

console.log(document.querySelector('span').innerHTML);
<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del> <span>$80.40</span>
</div>

Notice that the previous code is just an alternative and that you might want to use a query selector more specific than 'span' in order to get the proper value according to your use case and innerText or textContent instead of innerHTML. For example (Thanks to Tschallacka):

document.querySelector('[data-total-name="service-fee-total"] > span').innerText

console.log(document.querySelector('[data-total-name="service-fee-total"] > span').innerText);
<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del> <span>$80.40</span>
</div>

jQuery version

Again, here you can use a selector (i.e.: 'span:first') in order to get the span and text in order to get the span text. Something like this:

console.log($('span:first').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
  <del></del> <span>$80.40</span>
</div>

Further reading:

lealceldeiro
  • 14,342
  • 6
  • 49
  • 80
  • 2
    agree with @Tschallacka, but I'd use `textContent` over `innerText` as `textContent` is standard and `innerText` is not. `document.querySelector('.service-fee-total > span').textContent` – dysfunc Aug 07 '18 at 14:37
  • @Tschallacka and dysfunc thanks for the feedback, I updated the answer with that info. – lealceldeiro Aug 07 '18 at 14:45
1

What code are you using? Why isn't it working? Are there any errors being produced?

To make things really simple, you could just hook an ID to your span and use this JS (because jQuery would be way overkill if you don't need it for anything else):

var val = document.getElementById("id-goes-here").innerHTML;
Joel Rummel
  • 802
  • 5
  • 18
0

you can do this with jquery

at first you must include jquery cdn link in your html file. 

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>

after that you can write 

$(".cart-highlight > span").html();

and you will get the content of span.

AlexiAmni
  • 382
  • 1
  • 15
0

Full workable example, in Alert it shows the text:

  

      <html>
        <body>
        
        <div data-total-name="service-fee-total" data-currency="USD" class="col-xs-4 service-fee-total totals cart-total text-right cart-highlight">
         <del></del>
         <span id="span_Id">$80.40</span>
        </div>
        
        <button onclick="displayDate()">Click Me</button>
        
        <script>
        function displayDate() {
           var span_Text = document.getElementById("span_Id").innerText;
           alert (span_Text);
        }
        </script>
        </body>
        </html>
Simion
  • 353
  • 1
  • 9