If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

HTML Calculator using Javascript

Alright, this is a 3 part problem (HTML/JS/CSS) and I need help for the last 2 parts:

the first part concerns the layout of the webpage, a basic calculator that allows the user to input the quantity and hit either the "Calculate" (which spits out the math in both "Add-on" and "Grand total" textboxes) or "Exit" (which gives a "thank you" pop-up and then brings them to a homepage) buttons.

If a user types in a negative number, 0 or anything more than 5 a pop-up will appear, or if the user calculates with any letters.

Javascript will handle the math while CSS will handle the formatting and popups

The javascript and/or the CSS portions must be either separate or in the HTML document.

I have the basic layout, it's everything else that I and 10 other people are stuck onHTML code

Designing forms is very much about human behavior. If there's a way to screw up something it will happen. When you want accurate data you can't count on a user to enter only certain numbers, or only positive numbers, etc. Yes, you can script against it, but it's much easier just to use a <select> input tag. That way you're assured the number entered will fit your parameters.

Secondly, if you write to an <input type="text"> tag, you're leaving that tag open to "adjustment" by the user, making the data unusable to you.

Third, I always like to give the user "instant results". And I like "pretty printing" in case the user really wants to print the page.

With all that in mind, here's a rebuild of your page. I've commented things so hopefully you'll see what's going on.

function calc(el,cost,tot){ // create variables from the id's passed from the page, allowing this function to be reused
var x = el.value, // # selected
y = cost.innerHTML, // cost per item.
t = x*y; // multiply # x cost
tot.innerHTML = t; // display subtotal on page
total(); // go to "function total()" below to add all the subtotals to the base price, this retotals everything when any number is changed by the user.
}
function total(){ // this function runs on pageload to drop an initial grand total (the base price) on the page.
var sub = document.getElementsByName("total"), // get all elements with the name="total" attribute
t = document.getElementById("total").innerHTML; // get the current amount of the grand total and create the variable
t=0; // zero the grand total so new numbers don't get added to old totals if someone changes a 2 to a 1 e.g.
for(var i = 0; i < sub.length; i++){ // iterate through all the subtotals
var a = sub[i].innerHTML, // on each iteration, get the number, add it to the grand total, and create a new grand total
b = 1*a+1*t,
b2 = b.toFixed(2); // forces grand total to 2 decimal places -- with large numbers it was going beyond that
t = b2;
document.getElementById("total").innerHTML = t; // display the grand total on the page
}
}

Lastly, you didn't indicate that the data would be submitted online. If so, it's fairly trivial to copy the data into hidden inputs for form handling purposes.

I know there are mistakes in the coding still, and what I need to know is after a user types in the <input type = "type" id = "powerSupply" size = "2" value = "0" /> area, the area that says <input type = "text" size = 5 id = "power" onfocus = "this.blur();" /> is the one that spits out the ROW'S math

the computeCost function works like a charm but I really don't know about the computePower functions... can I even cal them in the same file or will I have to do something different.

function computePower()
{
var power = document.getElementById("power").value
document.getElementById("power").value =
totalPower = power * 3.50; is sketchy for me, and I need to know how to repeatedly call on the "power" value in both text imputs in the HTML document

also no data will be saved , this is basically just an exercise that will be used over and overagain in a bigger Picture encompassing CSS and SQL lessons.

1. You cannot have duplicate id values. Not allowed in JS
2. Information is passed as strings in functions so you need to convert to a number
either with Number() or value*1 or parseInt() or parseFloat()
3. You will need to modify the Mistake() function for values less than zero.
4. You should check the error console if you are using FF or Chrome browsers for testing.
5. Other errors you will find by doing the following:
Match your attempt to this working script and post back if unclear.