Javascript - Multiplying numbers live on a page

wishstik posted this at 12:37 — 27th September 2008.

Joined: Feb 2008

Is it possible to multiply numbers live on a page through Javascript?

For example, say I had a recipe:

222 g wheat flour
222 g rye flour
288 ml water

Could I enter '2' into a field and then click 'submit', to multiple the ingredients by 2? I've heard about the replace() function but I don't know much else.

- Thanks

kazimmerman posted this at 12:51 — 27th September 2008.

He has: 698 posts

Joined: Jul 2005

<script...>
function getRecipe(numServings) {	 
	 var wheat = 222;
	 	 var wheatMeas = "g";
	 var ryeFlour = 222;
	 	 var ryeFlourMeas = "g";
	 var water = 288;
	 	 var waterMeas = "mL";
	 if (numServings != 1) {
	 	 wheat *= numServings;
	 	 ryeFlour *= numServings;
	 	 water *= numServings;
	 }
	 document.getElementById("recipe").innerHTML = wheat+wheatMeas+" wheat<br />"+ryeFlour+ryeFlourMeas+" rye flour<br />"+water+waterMeas+"water";
}
</script>
<form name="getRecipe">
	 <input type="text" id="numServings" onchange="getRecipe(this.value)" />
</form>
<div id="recipe"></div>
<!--Show recipe info...-->

This code certainly isn't perfect, but it should provide a basic idea for doing what you want. Simple multiplication should work as long as you declare the initial measurements at the beginning. Displaying the results is up to you, if you want to make the whole recipe a list and change each list item separately, that would probably be most correct, but this solution works fine as well.

Kurtis

wishstik posted this at 13:03 — 27th September 2008.

He has: 7 posts

Joined: Feb 2008

Wow that's very insightful mscreashuns, thanks. I see what you're doing there, but the problem is that I wouldn't be able to create variables for every recipe. And I'm not quite sure why I'd need to worry about creating variables for the measurements? Essentially I've got just the numbers on a page to work with. Is there a way to find these numbers (say those in a particular div) and multiply them in javascript, presenting them temporarily changed on a page?

Now the more I look at it, the odder the idea seems.

kazimmerman posted this at 15:48 — 27th September 2008.

He has: 698 posts

Joined: Jul 2005

The problem is that I don't know how your recipe "inputting" is set up, but if you are sure that every number within this certain text needs to be multiplied, you could do the following assuming that everything is within one DIV or similar element.

<script...>
function newRecipe(numServings) {
	 var allWords = document.getElementById("recipe").split(" ");
	 var newRecipe = "";
	 for (i=0; i<allWorlds.length; i++) {
	 	 if (typeof(allWords[i]) == "number") {
	 	 	 allWords[i] *= numServings;
	 	 }
	 	 newRecipe = allWords[i]+" ";
	 }
	 document.getElementById("recipe").innerHTML = newRecipe;
}
</script>
<div id="recipe">
222 g wheat
222 g rye flour
288 mL water
</div>
<form name="getRecipe">
<input type="text" id="numServings" onchange="newRecipe(this.value)" />
</form>
...

I still don't know if this is efficient as I didn't even actually test it, but something along these lines would pull all of the text out of the DIV "recipe" and multiply all numbers by the "numServings" value.

Kurtis

decibel.places posted this at 17:11 — 27th September 2008.

He has: 1,494 posts

Joined: Jun 2008

MS's script should multiply the numbers, but I think it will lose the line breaks?

This sounds like a good place to use getelementsbyclassname...

However, that method is not yet supported by IE... so you can use a custom function

check here

http://www.google.com/search?&q=getelementsbyclassname

kazimmerman posted this at 17:40 — 27th September 2008.

He has: 698 posts

Joined: Jul 2005

Yeah, after I wrote it I noticed the line breaks would be gone, but the script should provide a basis for what to do and how to handle the data...

I even wondered if the typeof function would recognize the numbers as numbers since they are pulled from a string. I'm not completely sure of how the split function handles data and how the array stores it all...

Kurtis