Ok, I got a script that is caculating electricy. To get the var to work, I need to go into the script and put them myself. I want the users to be able to just be able to type into the box the things needed. Please help
/* this array contains subarrays as it's elements.
ever subarray is structured like [ITEM NAME, wattage, wattage, wattage] */
var items=[
['Dishwasher',2000,2500,3000],
['Microwave Oven',1400,1500,1600],
['Desk Lamp',60,75,100]
// etc.
],
/* this array contains various prices */
prices=[
'0.07',
'0.08',
'0.09'
// etc.
];
/* this function makes a shorthand for document.getElementById(id) */
function doc(objID){var obj=document.getElementById(objID);return obj;}
function buildSelects(){
/* these are shorthands for shorthands lol this way we make the script be not that complicated */
var tab=doc('tab'),calc=doc('calc'),item=doc('item'),wtg=doc('wtg'),utime=doc('utime'),dd=doc('dd'),cost=doc('cost'),
alt_item=doc('alt_item'),alt_wtg=doc('alt_wtg'),alt_dd=doc('alt_dd'),alt_cost=doc('alt_cost'),result=doc('result');
/* this tries to make rouned corners for the main table and does nothing if your browser doesn't know what 'border-radius' is */
try{tab.style.borderRadius='10px';}catch(e){}
/* this line cuts off all options from every select excepting the first option which is just a 'header' */
item.options.length=wtg.options.length=utime.options.length=dd.options.length=cost.options.length=1;
/* this line removes any result text and restores starting result text */
result.innerHTML='Result goes here';
/* this means that the buildSelects() function is going to be executed on every form reset */
calc.onreset=buildSelects;
/* these loops add options to certain selects */
for(var i in items){item.options[item.options.length]=new Option(items[i][0],items[i][0]);}
for(var h=1;h<25;h++){utime.options[utime.options.length]=new Option(h,h);}
for(var d=1;d<32;d++){dd.options[dd.options.length]=new Option(d,d);}
for(var p in prices){cost.options[cost.options.length]=new Option(prices[p],prices[p]);}
/* when the first select changed */
item.onchange=function(){
/* this removes focus from the select */
this.blur();
/* this gets the value of the selected option */
var val=this.options[this.selectedIndex].value;
/* this puts the selected option value in the text field below this select */
alt_item.value=val;
/* restore result starting text */
result.innerHTML='Result goes here';
/* if the 'header' option selected this line resets the form and stops the function from further executing */
if(val==''){calc.reset();return;}
/* if item selected */
else{
/* we create a temp array (a kind of shorthand) to store certain items subarray */
var temp=items[this.selectedIndex-1];
/* this removes all options from WATTAGE excepting 'header' */
wtg.options.length=1;
/* rebuild WATTAGE options for the selected item */
for(var i=1;i<temp.length;i++){wtg.options[wtg.options.length]=new Option(temp[i],temp[i]);};
}
}
/* this describes whats going on when WATTAGE, TIME, DAY or COST selects change */
wtg.onchange=utime.onchange=dd.onchange=cost.onchange=function(){this.blur();try{result.innerHTML='Result goes here';doc('alt_'+this.id).value=this.options[this.selectedIndex].value;}catch(e){}}
}
/* calculation itself */
function doCalc(){
/* shorthands for the form elements */
var alt_item=doc('alt_item'),alt_wtg=doc('alt_wtg'),utime=doc('utime'),alt_dd=doc('alt_dd'),alt_cost=doc('alt_cost'),result=doc('result'),
/* this Regular Expression checks if the given text field value contains only digits and maybe a dot between these digits */
dig=/^[\d]{1,}[\.]*[\d]*$/m;
/* here we test the text fields for WATTAGE, TIME, DAYS and COST and if all these fields' format is OK we do calculation */
if(dig.test(alt_wtg.value)&&dig.test(utime.value)&&dig.test(alt_dd.value)&&dig.test(alt_cost.value)){
var kw=new Number(alt_wtg.value)/1000;
result.innerHTML='<center><p style="width:250px;text-align:left"><b>Item:</b> '+alt_item.value+'<br /><b>Wattage:</b> '+kw+'kW<br /><b>Used:</b> '+utime.value+' hrs per a day<br /><b>Days of use:</b> '+alt_dd.value+'<br /><br />'
result.innerHTML+='<b>Total cost</b> is $'+(kw*new Number(utime.value)*new Number(alt_dd.value)*new Number(alt_cost.value)).toFixed(2)+'</p></center>';
}
/* if format check fails we inform the user that he is a dumbass */
else{result.innerHTML='<span style="color:Crimson;">Wrong data given</span>';}
}
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
right here at this forum! every day new people come and ask their questions. all you need is just read the answers and/or try to help them yourself. there are many high skilled professional coders over here (not like me, i'm just an amateur) and they help newbies. i can't imagine any better tutorial. if you need a reference just type 'javascript reference' in google.
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
Reply With Quote
Bookmarks