Adding Two Exponential Number In JavaScript

when I add two exponential number in JavaScript they look like that 1e-32e-3 not 3e-3. This is my code:

<!DOCTYPE html>
<html>

<body>
    <div>
        <form> <input id="a" type="tel">
            <p></p> <input id="clickMe" type="button" value="=" onclick="myFun();" />
            <p></p>
            <div>
                <p id="x"></p>
                <p id="y"></p>
            </div>
        </form>
        <script>
            function myFun() {
                var a = document.getElementById("a").value;
                var x = parseFloat(Math.pow(10, -a)).toExponential();
                var y = x + x;
                document.getElementById("x").innerHTML = "x = " + x;
                document.getElementById("y").innerHTML = "x + x = " + y;
            }
        </script>
    </div>
</body>

</html>

If the input was 2.7 then x = 1.995262314968879e-3 and x + x = 1.995262314968879e-31.995262314968879e-3

And sorry if my English is bad.

How to fix it?

Solution

move the .toExponential() to the display of the number to allow the calculation to occur.

<!DOCTYPE html>

<html>


<body>

<div>

<form>

<input id="a" type="tel">
<p></p>
<input id="clickMe" type="button" value="=" onclick="myFun();"/>
<p></p>

<div>
<p id="x"></p>

<p id="y"></p>
</div>

</form>

<script>

function myFun() {
  var a = document.getElementById("a").value;
  var x = parseFloat(Math.pow(10, -a));
  var y = x + x;

  document.getElementById("x").innerHTML="x = " + x.toExponential();
  document.getElementById("y").innerHTML="x + x = " + y.toExponential();
}

</script>

</div>

</body>
</html>