JavaScript - как использовать вычисления в другом месте на основе расчетов, помеченных выпадающим списком - PullRequest
Новая
       11

JavaScript - как использовать вычисления в другом месте на основе расчетов, помеченных выпадающим списком

0 голосов
/ 26 октября 2018

У меня есть форма, которую я использую в качестве калькулятора, и рассчитывается много разных вещей.Некоторые расчеты также отмечаются как Тип сбережений с выпадающим меню.Я хочу иметь возможность принять расчет, который отмечается как определенный тип сбережений, и иметь возможность добавлять эти значения и отображать их в другой области.Может ли кто-нибудь помочь мне найти лучший способ добиться этого?Очевидно, я очень новичок в JS, поэтому буду любезно принимать любые отзывы в отношении очистки или обрезки всего, что у меня уже есть.

Вот фрагмент калькулятора: 

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>testplate2</title>
</head>

<body>
	<form id="calcLV"> 
<fieldset>
 <legend> Labour Value </legend>
	<div>
	 <table>
	   <tr><td>
		  <label >Department</label><br/>
                1.<select id="dept" name="dept">
                <option value="None" selected></option>
                <option value="ALL">ALL</option>
                <option value="Dept1">Department 1</option>
                <option value="Dept2">Department 2</option>
                <option value="Dept3">Department 3</option>
                <option value="Dept4">Department 4</option>
                </select>
		</td><td>
		 <label for="nEmploy">Number of Employees</label><br/>
			<input type="number" name="nEmploy" id="nEmploy" value="0"/>
		   </td><td>
		 <label for="timeWeek">Time in hours per week</label><br/>			
			<input type="number" name="timeWeek" id="timeWeek" value="0"/></td>
		   <td><label> Savings Type </label><br/>
                <select id="savings" name="savings">
                <option value="None" selected></option>
                <option value="CostAvoidance">Cost Avoidance / Negotiated Savings</option>
                <option value="CustomerBenefit">Customer Benefit/ Revenue Growth</option>
                <option value="EmployeeMoral">Employee Moral</option>
                <option value="HardSavings">Hard Savings</option>
                <option value="ReallocatedLabour">Reallocated Labour</option>
			  </select></td></tr>
		 <tr><td>
                2.<select id="dept2" name="dept2">
                <option value="None" selected></option>
                <option value="ALL">ALL</option>
                <option value="Dept1">Department 1</option>
                <option value="Dept2">Department 2</option>
                <option value="Dept3">Department 3</option>
                <option value="Dept4">Department 4</option>
                </select>
		</td><td>
		  	<input type="number" name="nEmploy2" id="nEmploy2" value="0"/>
		   </td><td>
		   	<input type="number" name="timeWeek2" id="timeWeek2" value="0"/></td>
		   <td><select id="savings2" name="savings2">
                <option value="None" selected></option>
                <option value="CostAvoidance">Cost Avoidance / Negotiated Savings</option>
                <option value="CustomerBenefit">Customer Benefit/ Revenue Growth</option>
                <option value="EmployeeMoral">Employee Moral</option>
                <option value="HardSavings">Hard Savings</option>
                <option value="ReallocatedLabour">Reallocated Labour</option>
			  </select></td></tr>
		  <tr><td>
                3.<select id="dept3" name="dept3">
                <option value="None" selected></option>
                <option value="ALL">ALL</option>
                <option value="Dept1">Department 1</option>
                <option value="Dept2">Department 2</option>
                <option value="Dept3">Department 3</option>
                <option value="Dept4">Department 4</option>
                </select>
		</td><td>
			<input type="number" name="nEmploy3" id="nEmploy3" value="0"/>
		   </td><td>
		 	 <input type="number" name="timeWeek3" id="timeWeek3" value="0"/></td>
			  <td><select id="savings3" name="savings3">
                <option value="None" selected></option>
                <option value="CostAvoidance">Cost Avoidance / Negotiated Savings</option>
                <option value="CustomerBenefit">Customer Benefit/ Revenue Growth</option>
                <option value="EmployeeMoral">Employee Moral</option>
                <option value="HardSavings">Hard Savings</option>
                <option value="ReallocatedLabour">Reallocated Labour</option>
			  </select></td></tr>
		 <tr><td>
                4.<select id="dept4" name="dept4">
                <option value="None" selected></option>
                <option value="ALL">ALL</option>
                <option value="Dept1">Department 1</option>
                <option value="Dept2">Department 2</option>
                <option value="Dept3">Department 3</option>
                <option value="Dept4">Department 4</option>
                </select>
		</td><td>
			<input type="number" name="nEmploy4" id="nEmploy4" value="0"/>
		   </td><td>
			<input type="number" name="timeWeek4" id="timeWeek4" value="0"/></td>
		 <td><select id="savings4" name="savings4">
                <option value="None" selected></option>
                <option value="CostAvoidance">Cost Avoidance / Negotiated Savings</option>
                <option value="CustomerBenefit">Customer Benefit/ Revenue Growth</option>
                <option value="EmployeeMoral">Employee Moral</option>
                <option value="HardSavings">Hard Savings</option>
                <option value="ReallocatedLabour">Reallocated Labour</option>
			  </select></td></tr>
		   <tr><td><input type="button" onclick="displaylv()" value="Labour Value"></td>
				<td><p id="demo"></p></td</tr>
		</table></div>
	</fieldset> 
	<fieldset>
		<legend> Value Allotment </legend>
	<div>
	  <tr><td>
		  <p>Cost Avoidance/Negotiated Savings: </p><p id="Avoid"></p>
	  </tr></td>
	  <tr><td>
		  <p>Customer Benefit/Revenue Growth: </p><p id="Growth"></p>
	  </tr></td>
	   <tr><td>
		  <p>Employee Morale: </p><p id="Morale"></p>
	  </tr></td>
	  <tr><td>
		  <p>Hard Savings: </p><p id="Hard"></p>
	  </tr></td>
	   <tr><td>
		  <p>Reallocated Labour: </p><p id="Reallocated"></p>
	  </tr></td>
	<tr><td><input type="button" onclick="displayavoid()" value="Load Value"></td></tr>
	</fieldset>
	</table>
	
		
	<script>
	var dep= new Array();
 	dep["None"]=0;
 	dep["ALL"]=30.29;
 	dep["Dept1"]=42.02;
 	dep["Dept2"]=53.59;
 	dep["Dept3"]=49.27;
 	dep["Dept4"]=40.69;
 	
	
//LV Form Calculations	
function department(){	
	var deptchoice=0;
    //Get a reference to the form id=
    var theForm = document.forms["calcLV"];
    //Get a reference to the select id=
     var selectedDept = theForm.elements["dept"];
    deptchoice = dep[selectedDept.value];
    return deptchoice;
}
	
function calculate() {
	var CALC4 = 0;
	var CALC1 = department();
	var CALC2 = parseInt(document.getElementById('nEmploy').value);
	var CALC3 = parseInt(document.getElementById('timeWeek').value);
	CALC4 = CALC1*CALC2*CALC3;
	return CALC4;
}
	
function department2(){	
	var deptchoice=0;
    var theForm = document.forms["calcLV"];
    var selectedDept = theForm.elements["dept2"];
    deptchoice = dep[selectedDept.value];
    return deptchoice;
}
	
function calculate2(){
	var CALC4 = 0;
	var CALC1 = department2();
	var CALC2 = parseInt(document.getElementById('nEmploy2').value);
	var CALC3 = parseInt(document.getElementById('timeWeek2').value);
	CALC4 = CALC1*CALC2*CALC3;
	return CALC4;
}
	
function department3(){	
   var deptchoice=0;
   var theForm = document.forms["calcLV"];
   var selectedDept = theForm.elements["dept3"];
   deptchoice = dep[selectedDept.value];
   return deptchoice;
}
	
function calculate3() {
	var CALC4 = 0;
	var CALC1 = department3();
	var CALC2 = parseInt(document.getElementById('nEmploy3').value);
	var CALC3 = parseInt(document.getElementById('timeWeek3').value);
	CALC4 = CALC1*CALC2*CALC3;
	return CALC4;
}	
function department4(){	
   var deptchoice=0;
   var theForm = document.forms["calcLV"];
   var selectedDept = theForm.elements["dept4"];
   deptchoice = dep[selectedDept.value];
   return deptchoice;
}	
function calculate4(){
	var CALC4 = 0;
	var CALC1 = department4();
	var CALC2 = parseInt(document.getElementById('nEmploy4').value);
	var CALC3 = parseInt(document.getElementById('timeWeek4').value);
	CALC4 = CALC1*CALC2*CALC3;
	return CALC4;
}	
	
//LV totalling	
function LVtot (){
	var tot = 0;
	tot = calculate() + calculate2() + calculate3() + calculate4();
	return tot;
}
function displaylv(){
	document.getElementById("demo").innerHTML = "Total: " + LVtot();
}

		


	</script>
</body>
</html>
...