Can someone please help me finish this HTML calculator script? It's driving me nuts..

SunnyLeon · Sep 17, 2021

There is 5 Tablespoons (74 mls) of Whatever.

I need:
<select id="amount55" name="amount">
<option value=".25">¼</option>
<option value=".5">½</option>
<option value=".75">¾</option>
<option selected="selected" value="1">1</option>
<option value="1.5">1 ½</option>
<option value="2">2</option>
<option value="2.5">2 ½</option>
<option value="3">3</option>
<option value="3.5">3 ½</option>
<option value="4">4</option>
<option value="4.5">4 ½</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<select id="measurement55" name="measurement">
<option value="5">Teaspoon(s)</option>
<option value="15">Tablespoon(s)</option>
<option value="30">Fluid Ounce(s) in Volume</option>
<option selected="selected" value="240">Cup(s)</option>
<option value="470">Pint(s)</option>
<option value="946">Quart(s)</option>
<option value="3785">Gallon(s)</option>
<option value="1">Milliliter(s)</option>
<option value="1000">Liter(s)</option>
</select>

of
<select id="results55" name="result">
<option selected="selected" value="74">Whatever</option>
</select>

<input class="submit" style="display: inline;" name="action" type="submit" value="Calculate" />

<span style="font-size: 18px;">
You need:

How do I calculate the results and then have them shown after "You need:"?

Pretty please help me, I'm dying a little each day I try to make it work

alurosu · Sep 17, 2021

SunnyLeon said:
<input class="submit" style="display: inline;" name="action" type="submit" value="Calculate" />

Add an id to this button:

HTML:

<input class="submit" style="display: inline;" name="action" type="submit" value="Calculate" id="calculate" />

SunnyLeon said:
<span style="font-size: 18px;">

Add an id to this span:

HTML:

<span style="font-size: 18px;" id="calculateResult">

And after that use jQuery:

JavaScript:

$( "#calculate" ).click(function() {
  var amount= $('#amount55').find(":selected").text();
  var measurement= $('#measurement55').find(":selected").text();

  $('#calculateResult').html("You need:" + amount*measurement);
});

Castamir · Sep 17, 2021

alurosu said:

Add an id to this button:

HTML:

<input class="submit" style="display: inline;" name="action" type="submit" value="Calculate" id="calculate" />

Add an id to this span:

HTML:

<span style="font-size: 18px;" id="calculateResult">

And after that use jQuery:

JavaScript:

$( "#calculate" ).click(function() {
  var amount= $('#amount55').find(":selected").text();
  var measurement= $('#measurement55').find(":selected").text();

  $('#amount55').html("You need:" + amount*measurement);
});

Fantastic

SunnyLeon · Sep 17, 2021

alurosu said:

Add an id to this button:

HTML:

<input class="submit" style="display: inline;" name="action" type="submit" value="Calculate" id="calculate" />

Add an id to this span:

HTML:

<span style="font-size: 18px;" id="calculateResult">

And after that use jQuery:

JavaScript:

$( "#calculate" ).click(function() {
  var amount= $('#amount55').find(":selected").text();
  var measurement= $('#measurement55').find(":selected").text();

  $('#calculateResult').html("You need:" + amount*measurement);
});

Thank you, that worked

alurosu · Sep 17, 2021

SunnyLeon said:
Thank you, that worked

Awesome

693840 · Sep 17, 2021

alurosu said:

Add an id to this button:

HTML:

<input class="submit" style="display: inline;" name="action" type="submit" value="Calculate" id="calculate" />

Add an id to this span:

HTML:

<span style="font-size: 18px;" id="calculateResult">

And after that use jQuery:

JavaScript:

$( "#calculate" ).click(function() {
  var amount= $('#amount55').find(":selected").text();
  var measurement= $('#measurement55').find(":selected").text();

  $('#calculateResult').html("You need:" + amount*measurement);
});

i do not like you dear, you use ; in javascript

regards

alurosu · Sep 17, 2021

Blackhat Lifter said:
i do not like you dear, you use ; in javascript

regards

old habits die hard

ensus · Feb 13, 2022

Bored dev here, I know this is resolved but seeing the jquery, i put together a quick vanilla (possibly convoluted example) JS version, utilizing a single source of truth (data), so you can add and remove measurement types using plain data, without having to edit the template

and has some event listeners too

Heres the code
https://jsfiddle.net/procoib/m05thebx/1/

Can someone please help me finish this HTML calculator script? It's driving me nuts..

SunnyLeon

Elite Member

alurosu

Elite Member

Castamir

BANNED

SunnyLeon

Elite Member

alurosu

Elite Member

693840

Banned - Inappropriate behavior

alurosu

Elite Member

ensus

Junior Member

Main Menu

Marketplace

Making Money

BlackHat World