CODEWITHSUNDEEP
javascripthtml
computer
computer

Reputation: 113

How should i display number in HTML for later calculation in javascript

I am trying to figure out how to display number a right and efficient way for later calculation in HTML. This is what i can think of right now but doesn't seems right.

<p class = "price"> <span class ="sign">$</span> 10 </p>

Later implementation includes 

$("p.price") * (the desire currency rate being called)

It then updates the whole page with the p.price

Upvotes: 1

Views: 5109

Answers (3)

user6213434
user6213434

Reputation:

Try to loop through paragraph children and check, if nodeName of the children is text then parse it's wholeText

var pContent = $('.price')[0].childNodes,
    elem, num;

$.each(pContent, function (i, e) {
  elem = $(e)[0];
  if (elem && elem.nodeName == "#text") {
    num = parseInt(elem.wholeText);
  }
})

console.log(num)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<p class = "price"> <span class ="sign">$</span> 10</p>

when the page load the span is left empty but i want it to be shown (GBP as the base)

Simply change the spans text on window load instead of onchange event

var selectedIndex = select.selectedIndex;
  $('.sign').text(prefix[selectedIndex ]);
  $('.converted').text(currency[selectedIndex ] * $(price).data('price'));

Also i have some notes, if you have just one element you don't need to implement each function , and you don't need to make loop on each change as selectedIndex will filter the option which has selected attribute. http://jsfiddle.net/whoq9zd0/2/

Upvotes: 0

Paul
Paul

Reputation: 36319

The selector $("p.price") will give you an array of all paragraph elements with the class price. So your first issue is that you need to be aware of that, and your current multiplication code is not.

Second, you're trying to multiply the elements rather than the value of the one element.

Third, the value will be a string and you need a number.

I'd try something like:

<p class="price"><span>$</span><span class="amount">10</span>

Then your JS could look like this (minus smart error checking and optimization and such)

var amount = parseFloat($("span.amount:first").text(), 10);

$("span.amount:first").text(amount * exchangeRate);

Upvotes: 1

Yevhenii Ponomar
Yevhenii Ponomar

Reputation: 199

Consider using data attributes:

<p class="price" data-usd-price="10"> any markup you want </p>

You can then format it however you like and access the raw value later with:

$("p.price").data("usd-price")

Here a bit more complicated example:

<p class="price" data-usd-price="10">foo<span class="converted"></span></p>
<p class="price" data-usd-price="30">bar<span class="converted"></span></p>
<p class="price" data-usd-price="49.99">buzz<span class="converted"></span></p>
<p class="price" data-usd-price="99.99"><span class="converted"></span></p>

$('p.price').each(function () {
  $(this)
    .children('span.converted')
    .html(
      $(this).data('usd-price') * 22
    )
})

Upvotes: 3

Related Questions