Get number value from form, calculation, and updating html content with javascript

Question

I'm trying to make a very simple calculator in HTML and javascript But it still does not work

My question are:
1. How do I get value from a form and set it as a number, not a string?
2. How do I perform quadratic calculation in javascript?
3. How do I update html content with javascript? So whenever I change the value of the input form and press submit, the result will change based on the input that I type, I've tried the document.getElementById("idhere").innerHTML=valuehere; but still does not work.

<script tyle="text/javascript">
function calculateThis(form) {
var userweight=form.weight.value;
var caffeineamount=form.caffein.value;
var caffeinetimes=form.caffeintimes.value;
var totalcaffeine=caffeineamount*caffeinetimes;

// Calculate max caffeine per person
var maxcaffeine=userweight*10;

// Calculate remaining after 24 hours
// Half life = 6 hours
var totalcaffeineafter=totalcaffeine(1/16);

// Calculating how many hours until the caffeine completely digested
var totaldigest=totalcaffeine;
var digesttime=0;

while (totaldigest>0.05) {
totaldigest=totaldigest(1/2);
digesttime++;
}

digesttime=digesttime*6;

// Calculating when the user will probably die of overdose
var countcaffeine=0;
var overdosetime=1;

while (countcaffeine<maxcaffeine){
countcaffeine=countcaffeine+totalcaffeine;
overdosetime++;
}

// Show total amount of caffeine
document.getElementById("showtotalkafein").innerHTML=totalcaffeine;

// Show amount of caffeine after 1 day
document.getElementById("showtotalkafeinsetelah").innerHTML=totalcaffeineafter;

// Show digest time
document.getElementById("showwaktudigest").innerHTML=digesttime;

// Show overdose
document.getElementById("showberapakali").innerHTML=overdosetime;

return false;
}
</script>

<form class="form">
Weight<br />  
<input type="text" name="weight" class="required" value="" /><p /> 
Amount of caffein in coffee<br />
<input type="text" name="caffein" class="required" value="" /><p /> 
How many times drinking coffee in a day<br /> 
<input type="text" name="caffeintimes" class="required" value="" /><p />

<button type="button" onclick="calculateThis(this.form); return false;">Calculate</button></form>

<h1>Result</h1>
<p id="showtotalkafein">Show Caffein Total Here</p> 
<p id="showtotalkafeinsetelah">Show Caffeine Amount After 24 hours</p> 
<p id="showwaktudigest">Show Digest TIme Here</p> 
<p id="showberapakali">Show Overdose Time Here</p>

Answer 1

function calculateThis(form) {
    var userweight = parseInt(form.weight.value, 10);
    var caffeineamount = parseInt(form.caffein.value, 10);
    var caffeinetimes = parseInt(form.caffeintimes.value, 10);
    var totalcaffeine = caffeineamount * caffeinetimes;

    console.log(totalcaffeine)
    // Calculate max caffeine per person
    var maxcaffeine = userweight * 10;

    // Calculate remaining after 24 hours
    // Half life = 6 hours
    var totalcaffeineafter = totalcaffeine * (1 / 16);

    // Calculating how many hours until the caffeine completely digested
    var totaldigest = totalcaffeine;
    var digesttime = 0;

    while (totaldigest > 0.05) {
        totaldigest = totaldigest * (1 / 2);
        digesttime++;
    }

    digesttime = digesttime * 6;

    // Calculating when the user will probably die of overdose
    var countcaffeine = 0;
    var overdosetime = 1;

    while (countcaffeine < maxcaffeine) {
        countcaffeine = countcaffeine + totalcaffeine;
        overdosetime++;
    }

    // Show total amount of caffeine
    document.getElementById("showtotalkafein").innerHTML = totalcaffeine;

    // Show amount of caffeine after 1 day
    document.getElementById("showtotalkafeinsetelah").innerHTML = totalcaffeineafter;

    // Show digest time
    document.getElementById("showwaktudigest").innerHTML = digesttime;

    // Show overdose
    document.getElementById("showberapakali").innerHTML = overdosetime;

    return false;
}

DEMO

Note

Here I used .parseInt() which used to convert a number to integer, if you need any value in Float then use . parseFloat()`.

---

Problems in your code

• form.weight.value , form.caffein.value ... give value as string, so you need to convert them to number (integer/ float).

• you used totalcaffeine(1 / 16) and totaldigest = totaldigest(1 / 2); , not a valid Math operation in javascript, it should be totalcaffeine * (1 / 16) and totaldigest = totaldigest * (1 / 2);

---

According to your comment

What .parseInt(form.caffeintimes.value, 10) , do?

Format of parseInt is:

.parseInt(valueToConvert, [radix]) .

So, .parseInt(form.caffeintimes.value, 10) will convert form.caffeintimes.value string to a 10-base integer.

---

Related refs:

.parseInt()

.parseFloat()