html form data into javascript for basic math

Question

I am trying to take two numbers in an html form and upon hitting the classic 'submit' button, do a little math behind the scenes with javascript and then show the results on the web page.

I can't use php with my web host.

Ihis is what I have so far:

URL

The code so far:

var x = dirtyfiat;
var y = price;
var z = x / (y / 100000000);
document.getElementById("sats").innerHTML = z;

<form>
  How much #dirtyFiat U.S. Dollars?
  <input type="float" name="dirtyfiat"> What is the price of bitcoin?
  <input type="float" name="price">
  <input type="submit" value="Let's go!">
</form>

<p id="sats"></p>

Answer 1

• You need to wrap the code in a function. The function needs to be executed on click of the submit
• The form submit event has to have a preventDefault or the button needs to be type="button"
• The dirtyfiat and price needs to be taken from the fields using document.querySelector("[name=dirtyfiat]").value or give them an ID which is simpler

• HTML does not (yet) have a float type. You need "number" Is there a float input type in HTML5?

• You also need some handling of Not A Number and division by 0

window.addEventListener("load",function() { // on page load
  document.getElementById("myForm").addEventListener("submit",function(e) { // on submit
    e.preventDefault(); // stop submission
    // get values - the + converts a string containing a number to a number
    var x = +document.getElementById("dirtyfiat").value || 0; // if nothing entered make it 0
    var y = +document.getElementById("price").value || 0; // if nothing entered make it 0
    if (isNaN(x)) x = 0;
    if (isNaN(y)) y = 0;
    document.getElementById("sats").innerHTML = (y !=0)   ? x / (y / 100000000) : "Cannot divide by 0";
  })    
})

<form id="myForm">
  How much #dirtyFiat U.S. Dollars?
  <input type="number" id="dirtyfiat" name="dirtyfiat"> What is the price of bitcoin?
  <input type="number" id="price" name="price">
  <input type="submit" value="Let's go!">
</form>

<p id="sats"></p>

Answer 2

First, "float" is not a valid input type. You can find a list of them here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

We'll change those to number instead. Next, we need an id for each input so we can target them.

Here is the corrected HTML:

<form>
  How much #dirtyFiat U.S. Dollars?
  <input id='dirtyinput' type="number" name="dirtyfiat"> What is the price of bitcoin?
  <input id='priceinput' type="number" name="price">
  <input id='submit' type="submit" value="Let's go!">

</form>
<p id="sats"></p>

For the javascript, first reference the ids with document.getElementById() and store those ids in variables. Next, assign the result of the math to a variable.Next, we save the the button id to a variable. Then, add the event listener to the submit button. Then, we call the

Here is the corrected JS:

var output = document.getElementById('submit-btn');
output.addEventListener('click', function() {
    var x = document.getElementById('dirtyinput').value;
    var y = document.getElementById('priceinput').value;
    var result = x / y / 100000000;
    document.getElementById("sats").innerHTML = result;
})

This is the basic version of what you requested. There is a lot more you can do with error handling and value checking.