Help with Java Script to format numbers

When using Javascript and Storyline variable exact spelling is key ! So make a habit of always using a similar approach on naming custom variables. Either use camelBack notation... so something like this... mycustomVar or just all underscore...any way you want...but do stick to a similar method allways. That makes it easier to ensure variable names will allways be the same.

Because that was the issue on your first slide and the calculate button.

Also make it a habit to test using the console ( F12 or CTRL+Shift+I in the browser )
When doing that you immediately see errors. As you can see in the message in the console...
'Path did not resolve at: txtDepAmt'.. This means Storyline cannot find the variable called txtDepAmt

And when you open up your variable window in Storyline, you notice it is called 'TxtDepAmt'
The capital T at start is different, and thus that variable is not recognized. Changing that and it works nicely. Although on your slideLayer when clicking Next some other error pops up. Not sure what that is about.

Hi Math

That is great thanks. Do you know of any courses which can give me a basic understanding of Javascript and Storyline, so I can start learning more?

Cheers

Kim

Hi Math

The script brought up the dollar sign but it didnt put in any commas. What is the script for putting in commas as well please?

Cheers

Kim

var player=GetPlayer();
varTotAvailSav=playerGetVar("TotAvailSav");
varTotAvailSav=TotAvailSav.toFixed(0).replace(/\d(?=(\d{3})+\.)/g, '$&,');
vartxtvalue=TotAvailSav.toString();
player.SetVar("txtTotAvailSav",txtvalue);

Im not quite sure what's the issue. Might be the regex replace that removes all comma's .... my Regex is not that good. Whats supposed to happen ?

Here you can construct and test any Regex you want.
https://regex101.com/

Kim,

If you do not want any decimal places, try replacing your third line of code with this line:

var TotAvailSav=TotAvailSav.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$&,');

If you do want two decimal places, keep your current third line but change...

toFixed(0)

...to...

toFixed(2)

Regex Master Steve to the rescue ;-)

Hi everyone

Thank you for that. I am still trying to work out what is happening, but one question I had is how do I change that line of code above, so that I get a comma for thousands?

Cheers

Kim

Just copy that line from my message above and paste it over the third line in the Execute JavaScript panel in Storyline. (Maybe I'm misunderstanding your question?)

Hi, sorry dont worry I saw that piece of code above did that I hope.  I will give it a go.

In a previous slide where the java script works, I use a constant variable numValue = numValue

var player=GetPlayer();
var numValue=player.GetVar("Per1");
var numValue=numValue.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$&,');
var txtValue=numValue.toString();
player.SetVar("txtPer1", txtValue);

The user puts in a number for the purchase price of a house and this is stored in numValue. Then that is multipled by Per1 (0.1) and the new Per1 is found e.g. 10 (numValue is 100).

I then want the txtPer1 value of the dollars, to be shown and it does perfectly.

But when I do the same code for this different variable in a different scene, it doesn't work.

var player=GetPlayer();
var numValue=playerGetVar("DepAmt");
var numValue=numValue.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$&,');
var txtvalue=numValue.toString();
player.SetVar("txtDepAmt",txtvalue);


var player=GetPlayer();
var numValue1=playerGetVar("DepAmt1");
var numValue1=numValue1.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$&,');
var txtvalue1=numValue1.toString();
player.SetVar("txtDepAmt1",txtvalue1);

Am I supposed to be using DepAmt in the lines

var numValue=playerGetVar("DepAmt");

(instead it is DepAmt=playerGetVar("DepAmt")

var numValue=numValue.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$&,');

(instead it is DepAmt=DepAmt.toFixed().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$&,');

var txtvalue=numValue.toString();

(instead it is txtvalue=DepAmt.toString()

Sorry I realise this must be pretty straight forward for you but I am just confused as to why it works perfectly in one set of slides and not at all in another.

Cheers

Kim

Kim,

The problem likely has to do with a mix-up with case in your variable names. For example, you have this line of code in your message above:

player.SetVar("txtDepAmt",txtvalue);

...but in the .story file you attached at the beginning of this thread, you don't have a Storyline variable named "txtDepAmt." Instead, it is named "TxtDeptAmt," which to Storyline is something completely different. Spelling and case of variable names are critical in JavaScript-Storyline communication.

My recommendation is to copy your JavaScript code to Word or Notepad and display it alongside Storyline's Variables dialog box to make absolutely certain that any custom Storyline variables you are getting into JavaScript or setting from JavaScript are spelled exactly the same (including case) in JavaScript as they are in the Storyline Variables panel.

I also just noticed your code has a line that includes:

playerGetVar

...but it should be:

player.GetVar

See the very basic sample attached (I put the two blocks of code in separate Execute JavaScript triggers for clarity but in practice I would generally put these together in one trigger).

Hi everyone

Thank you all so much, I have it working and it is great.

It took a bit to understand what it all meant, but once I did it worked perfectly.

This community was a huge help.

Cheers

Kim

Very happy to learn you have the JavaScript working, Kim!