0

I have many results being output from variables into spans, for example:

JavaScript document.getElementById("ResultsSavingsPerDay").innerHTML = SavingsPerDay;

HTML

Savings per day: <span id="ResultsSavingsPerDay"></span> Thai Baht

which may display the result as something like: 4347.343543654

How can I format the output to the currency to display as 4,347.34? And if the output is a negative figure then change the font color to red also?

I have seen similar currency formats on Stack Overflow, but not changing the results within a span. It is this part that I am struggling with mainly.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
Dayley
  • 166
  • 1
  • 2
  • 13
  • Please visit the [help], take the [tour] to see what and [ask]. Do some research, search for related topics on SO; if you get stuck, post a [mcve] of your attempt, noting input and expected output. – mplungjan Nov 27 '18 at 09:59
  • I did state **I have seen similar currency formats, but not changing the results of a span.** meaning I have seen similar ways to change currency of various things such as the log outputs and input boxes, but not span outputs. So I disagree to it being a duplicate @mplungjan – Dayley Nov 27 '18 at 10:05
  • See the dupes One formats signed currency, the other sets the class or color. There are hundreds `var span = document.getElementById("SavingsPerDay"); span.innerHTML = formatMoney(SavingsPerDay); span.style.color=SavingsPerDay<0?"red":"black";` – mplungjan Nov 27 '18 at 10:10
  • I have tried searching on StackOverflow and Google searching through many other sites, but unable to find exactly what I am looking for, hence posting here. If there is a dupe, please link me to it relating to span currency formatting and not currency formatting in general. – Dayley Nov 27 '18 at 10:13
  • The difference is `document.getElementById("mySpan").innerHTML=formatMoney(SavingsPerDay)` and `document.getElementById("myFormField").value=formatMoney(SavingsPerDay)` What is your specific issue with this difference? – mplungjan Nov 27 '18 at 10:15
  • 1
    Here is a solution based on the first dupe with the simple addition of a test for negative http://jsfiddle.net/mplungjan/1jvLgtfd/ – mplungjan Nov 27 '18 at 10:23
  • Okay the JSFiddle solution works perfectly! Greatly appreciated. However because I have around 25 output spans on the page, how would I go about doing a **working** array similar to this? http://jsfiddle.net/Dayley/a9jqc2x8/1/ – Dayley Nov 27 '18 at 11:12
  • 1
    Call the function on the amount. NEVER have such a complicated calculation inside the loop: http://jsfiddle.net/mplungjan/1jvLgtfd/ – mplungjan Nov 27 '18 at 12:18
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/184368/discussion-between-dayley-and-mplungjan). – Dayley Nov 28 '18 at 06:29
  • 2
    As you [seem to be confused](https://meta.stackoverflow.com/questions/406187#comment832775_406187) about how the duplicates answer your question, for the formatting: `document.getElementById("ResultsSavingsPerDay").innerHTML = SavingsPerDay.toFixed(2);` (as described in [this answer](https://stackoverflow.com/a/149099/3270037). For the colour [this](https://stackoverflow.com/a/29397972/3270037) is basically an exact duplicate of what you want, except using `ResultsSavingsPerDay` instead of `display` and `SavingsPerDay` instead of `sum`. – Nick is tired Mar 23 '21 at 12:30

0 Answers0