Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Julio Akiyama
Julio Akiyama
9,068 Points
Posted by Julio Akiyama
Julio Akiyama
9,068 Points

Please Help!!

Hi guys!! I'm new in javascript. I'm trying building on my own a kind of a calculator. I'd like to show in the screen the comma and dot while the user is typing. For example: if the user press the buttons 1234567, the comma and dot add automatically "12,345.67". How can I use .toLocaleString() or any other method in this situation? Ive tried many way, but couldnt find a way to do so. Thank you for any help!

Here is the code

  var screen = document.querySelector('#display');
  var key = document.querySelector('.key');
  var clear = document.querySelector('#clear');
  key.addEventListener('click', (event) => {
  screen.innerHTML += event.target.innerHTML;
  });

<div class="wrap">
    <form name="case">
      <p id="display"></p>
      <div class="key">
        <button type="button" class="number" value="7">7</button>
        <button type="button" class="number" value="8">8</button>
        <button type="button" class="number" value="9">9</button>
        <button type="button" class="number" value="4">4</button>
        <button type="button" class="number" value="5">5</button>
        <button type="button" class="number" value="6">6</button>
        <button type="button" class="number" value="3">3</button>
        <button type="button" class="number" value="2">2</button>
        <button type="button" class="number" value="1">1</button>
        <button type="button" class="number" value="0">0</button>
        <button type="image" class="img" value=""></button>
        <button type="button" id="clear" class="clear" value="C">C</button>
      </div>
    </form>
  </div>

3 Answers

Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points
Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points 
var n = 100000;
var value = n.toLocaleString(
  undefined, // use a string like 'en-US' to override browser locale
  { minimumFractionDigits: 2 }
);
console.log(value);
// In en-US, logs '100,000.00'
// In de-DE, logs '100.000,00'
// In hi-IN, logs '1,00,000.00'

Hope this helps, give a feedback if it worked for you! :)

Julio Akiyama
Julio Akiyama
9,068 Points
Julio Akiyama
Julio Akiyama
9,068 Points

Thank you for your reply Tsenko! Here what I'm trying, but not working :( . Could you say what is wrong with my code, please? Thank you again

  var screen = document.querySelector('#display');
  var key = document.querySelector('.key');
  var clear = document.querySelector('#clear');
 var display;

  key.addEventListener('click', (event) => {
 display += event.target.innerHTML;
  screen.innerHTML = display.toLocaleString();
  });
Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points
Tsenko Aleksiev
Tsenko Aleksiev
3,819 Points

try it like:

display.toLocaleString("en-US");

I haven't watched your other code. Give a feedback if it's working or not :)

Julio Akiyama
Julio Akiyama
9,068 Points
Julio Akiyama
Julio Akiyama
9,068 Points

Hi Tsenko! Not yet!! No comma, no dot, only numbers! I did this

  var screen = document.querySelector('#display');
  var key = document.querySelector('.key');
  var clear = document.querySelector('#clear');
 var display;

  key.addEventListener('click', (event) => {

 display += event.target.innerHTML;
  screen.innerHTML += display.toLocaleString('en-US', {maximumFractionDigits: 2});
  });