When html button is clicked the end result is not being changed | SpeakJS | Page 1

vernal phoenix Mar 19, 2023, 6:37 AM

#

Here is the code. Can anyone explain why it doesnt work?

const calculateButton = document.getElementById("calculate-button");

calculateButton.addEventListener("click", function () {
  const dollarsInput = document.getElementById("dollars-input");
  const dollars = parseFloat(dollarsInput.value);
  const result = 0.0035 * dollars;

  const formattedResult = `(${dollars} * ${result.toFixed(2)})`;

  const endResult = document.getElementById("result");

  endResult.textContent = formattedResult;
});

#

This is my first time in this server. Please lmk if im doing anything wrong.

carmine quail Mar 19, 2023, 6:40 AM

#

Nothing obvious on first glance. What does your html look like?

vernal phoenix Mar 19, 2023, 6:41 AM

#

it looks like this:

<body>
    <main>
      <div class="container">
        <h1 class="heading">Calculator Conversion</h1>
        <h3 class="sub-heading">Chrome extension for conversion.</h3>
        <div id="main-content">
          <input type="text" id="dollars-input" placeholder="Enter dollars"><br>
          <button id="calculate-button">Calculate</button>
          <br>
          <br>
          <span id="result" class="value-span">Result</span>
          <br>
          <br>
        </div>
      </div>
    </main>
  </body>

#

ive just sent the body

carmine quail Mar 19, 2023, 6:44 AM

#

What are you expecting it to do?

vernal phoenix Mar 19, 2023, 6:46 AM

#

When i enter a number into the text box and when i click the Calculate button it will use the formula i have provided in the Javascript and change the result text to the result in the js after the calculation

carmine quail Mar 19, 2023, 6:49 AM

#

Ok so you're doing well right up until const formattedResult = `(${dollars} * ${result.toFixed(2)})`;

vernal phoenix Mar 19, 2023, 6:49 AM

#

Ok

#

would i have to put the formatted result below the endResult?

#

const endResult = document.getElementById("result");
const formattedResult = `(${dollars} * ${endResult.toFixed(2)})`;

#

something like this?

carmine quail Mar 19, 2023, 6:54 AM

#

No. Let's look at what's happening in (${dollars} * ${result.toFixed(2)}) (you can also console.log formattedResult to look directly)

#

Let's pretend I put 1 into the input. What's dollars at this point?

vernal phoenix Mar 19, 2023, 6:55 AM

#

a converted number using the formula?

carmine quail Mar 19, 2023, 6:55 AM

#

Is it? Where are you assigning a value to dollars?

vernal phoenix Mar 19, 2023, 6:56 AM

#

const dollars = parseFloat(dollarsInput.value);

#

Here i assume

carmine quail Mar 19, 2023, 6:57 AM

#

Correct. Ok so we know that dollars is set only once. We further know that it can't be reassigned because it's declared via const dollars. So what is dollars being set to?

#

Assuming I put a 1 in the input

vernal phoenix Mar 19, 2023, 7:00 AM

#

carmine quail Correct. Ok so we know that `dollars` is set only once. We further know that it ...

the formatted result?

carmine quail Mar 19, 2023, 7:01 AM

#

What does this line do? const dollars = parseFloat(dollarsInput.value);

vernal phoenix Mar 19, 2023, 7:03 AM

#

it takes the dollarsInput.value and converts it into a string, then parses that string into a decimal place, then returns the number into a number or NaN or Nil

carmine quail Mar 19, 2023, 7:04 AM

#

Sweet, yeah. And assigns that to dollars right?

vernal phoenix Mar 19, 2023, 7:04 AM

#

Yea? I think.

#

Yea it does

carmine quail Mar 19, 2023, 7:05 AM

#

Try adding a console.log(dollars) after that line.

#

Great

#

So if I put in the input a 1, what is dollars?

vernal phoenix Mar 19, 2023, 7:06 AM

#

0.0035

carmine quail Mar 19, 2023, 7:07 AM

#

it takes the
dollarsInput.value
and converts it into a string, then parses that string into a decimal place, then returns the number into a number or NaN or Nil

#

How would it be 0.0035 if I put a 1 in the input?

vernal phoenix Mar 19, 2023, 7:10 AM

#

the result may be a decimal number with a value of 0.0035?

carmine quail Mar 19, 2023, 7:11 AM

#

dollars contains the parsed input value. Just as you described...
So if I put in a 1 into the input then dollars was assigned a 1

vernal phoenix Mar 19, 2023, 7:11 AM

#

it would convert the string 1 into the decimal number 1.0

carmine quail Mar 19, 2023, 7:12 AM

#

Basically. In this case since the number was an integer without a decimal it's just 1

#

calculateButton.addEventListener("click", function () {
  const dollarsInput = document.getElementById("dollars-input");
  const dollars = parseFloat(dollarsInput.value);
  console.log(result)

#

Add a console.log and try out some different values to understand what those two lines do

#

You need to be comfortable with what's happening in your code otherwise you're just stuck guessing. Luckily you can drop a console.log anywhere and see exactly how the computer has interpreted your code.

vernal phoenix Mar 19, 2023, 7:15 AM

#

Alright

carmine quail Mar 19, 2023, 7:16 AM

#

So then if we stick with a 1 in our input. We know dollars is 1. And we know the value in dollars will never change.

#

So we move to the next line

const result = 0.0035 * dollars;

#

What does this do?

#

What's in result in our example?

vernal phoenix Mar 19, 2023, 7:18 AM

#

it creates a formula and multiplies the dollars by the 0.0035

#

so in this case the answer would be

carmine quail Mar 19, 2023, 7:23 AM

#

Great! So we now know what dollars is and what result is. Last step. What does this do in our example?

const formattedResult = `(${dollars} * ${endResult.toFixed(2)})`;

vernal phoenix Mar 19, 2023, 7:27 AM

#

This will format the dollars to (1 * 0.00)

#

carmine quail Mar 19, 2023, 7:29 AM

#

Cool. But that's not what you want right? So how do you fix it?

vernal phoenix Mar 19, 2023, 7:32 AM

#

I think i would remove the * and just have the result.toFixed(2)?

carmine quail Mar 19, 2023, 7:32 AM

#

Give it a shot then

vernal phoenix Mar 19, 2023, 7:33 AM

#

const dollars = parseFloat(1);
const result = 0.0035 * dollars;

const formattedResult = `($${result.toFixed(2)})`;

console.log(formattedResult)

#

($0.00)

#

is the output

carmine quail Mar 19, 2023, 7:35 AM

#

Uh huh. result is what prior to calling .toFixed(2) on it?

vernal phoenix Mar 19, 2023, 7:37 AM

#

it is the number representing the result of multiplying 0.0035 with the value of dollars , which is 1. In other words, result is equal to 0.0035.

carmine quail Mar 19, 2023, 7:38 AM

#

Perfect. And what does .toFixed(2) do?

vernal phoenix Mar 19, 2023, 7:38 AM

#

toFixed(2) formats the number to 2 decimal place

carmine quail Mar 19, 2023, 7:39 AM

#

Perfect. So ($0.00) would be the expected result of entering a 1, right?

vernal phoenix Mar 19, 2023, 7:39 AM

#

Essentially, Yea

carmine quail Mar 19, 2023, 7:40 AM

#

So then it's doing what you want?

vernal phoenix Mar 19, 2023, 7:41 AM

#

technically?

#

its removed the 3rd and 4th decimal place

#

i assume

carmine quail Mar 19, 2023, 7:44 AM

#

Exactly. Since you're multiplying a number that you're trying to format to a standard dollar amount ($X.XX) by a decimal that's smaller than a typical dollar amount would be ($0.00xx) you're running into an edge case because the input amount isn't large enough to have the result be able to be formatted without cutting off the non-zero numbers. Leaving you with $0.00.

#

You have to decide how you want to handle that. But in the case of entering 100 you'll get a formatted result.

#

I will note that working with money values using floats will open you up to the float precision issue. For example if you do console.log(0.2 + 0.4). But that's a whole different ball of wax.

vernal phoenix Mar 19, 2023, 8:01 AM

#

Alright.

vernal phoenix Mar 19, 2023, 8:21 AM

#

vernal phoenix Here is the code. Can anyone explain why it doesnt work? ```js const calculateBu...

This is all useful and all but this does not answer my question.

carmine quail Mar 19, 2023, 8:29 AM

#

It does. $0.0035 when converted to a physical dollar amount is $0.00. You just have to decide how to handle your newly discovered rounding issue. Or stop using .toFixed(2).

#

Your code is working as intended

#

You now have to decide what you want it to do in these cases. And code that up so it can do it

vernal phoenix Mar 19, 2023, 8:31 AM

#

Alright. Well im using the chrome extension guidelines. So im not too sure if there are some problems with the code

#

as im sure that when i press the button nothing happens

carmine quail Mar 19, 2023, 8:33 AM

#

Well then you have something wrong with the extension. The code by itself works as described

#

https://jsfiddle.net/sufycmb6/

Edit fiddle - JSFiddle - Code Playground

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

vernal phoenix Mar 19, 2023, 8:34 AM

#

im thinking that the addEventListener doesnt work with the chrome extension

carmine quail Mar 19, 2023, 8:38 AM

#

Also you neglected to mention this was a chrome extension. You have to wait for the page to load the html before running your script.

#

In any case update your run time

#

https://developer.chrome.com/docs/extensions/mv3/content_scripts/#run_time

Chrome Developers

Chrome Extensions content scripts - Chrome Developers

An explanation of content scripts and how to use them in your Chrome Extension.

#When html button is clicked the end result is not being changed