I have a problem with a variable input id that needs to be created. The current form has a dynamic input function where a new td with input boxes is created. The input boxes are processes in javascript for further calculations.
Right now, whenever I add a new collumn with input options, cycle time and idle time is calculated in the box of process #1 istead of the new created ones of process #2.
It would be great if zou guys could help me out with that. Here is my current status:
<html>
<script>
function calculateTakt() {
var c_demandtStr =document.getElementById('c_demand').value;
if (!c_demandtStr)
c_demandtStr = '0';
var c_workingTimetStr = document.getElementById('c_workingTime').value;
if (!c_workingTimetStr)
c_workingTimetStr = '0';
var demand = parseFloat( c_demandtStr);
var workingTime = parseFloat(c_workingTimetStr);
document.getElementById("r_taktTime").value = workingTime / demand;
}
function calculateCycle() {
var c_outputtStr = document.getElementById('c_output').value;
if (!c_outputtStr)
c_outputtStr = '0';
var c_processingTimetStr = document.getElementById('c_processingTime').value;
if (!c_processingTimetStr)
c_processingTimetStr = '0';
var c_setupTimetStr = document.getElementById('c_setupTime').value;
if (!c_setupTimetStr)
c_setupTimetStr = '0';
var output = parseFloat(c_outputtStr);
var processingTime = parseFloat(c_processingTimetStr);
var setupTime = parseFloat(c_setupTimetStr);
document.getElementById("r_cycleTime").value = output / (processingTime + setupTime);
var r_taktTimetStr = document.getElementById('r_taktTime').value;
var r_cycleTimetStr = document.getElementById('r_cycleTime').value;
var taktTime = parseFloat(r_taktTimetStr);
var cycleTime = parseFloat(r_cycleTimetStr);
document.getElementById("r_idleTime").value = taktTime - cycleTime;
}
var counter = 1;
var limit = 10;
function addInput(tdName){
if (counter == limit) {
alert("You have reached the maximum of " + counter + " process steps.");
}
else {
var newtd = document.createElement('td');
newtd.innerHTML = "Process #" + (counter + 1) + "<br>Units processed (pce) <input id = 'c_output' type='Text' name='output' size='4' onkeyup='calculateCycle()'>"
+ " <br>Processing time (min) <input id = 'c_processingTime' type='Text' name='processingTime' size='4' onkeyup='calculateCycle()'>"
+ " <br>setup time (min) <input id = 'c_setupTime' type='Text' name='setupTime' size='4' onkeyup='calculateCycle()'> <br>"
+ " <br>Cycle Time <input id = 'r_cycleTime' type='Text' name='cycleTime' id='cycleTime' size='4'>"
+ " <br>Idle Time <input id = 'r_idleTime' type='Text' name='idleTime' id='idleTime' size='4'>";
document.getElementById(tdName).appendChild(newtd);
counter++;
}
}
</script>
<b>Machinery and Process Indicators</b><br>
<input id = "c_demand" type="Text" name="demand" size="4" onkeyup="calculateTakt()"> Customer demand (YR)<br>
<input id = "c_workingTime" type="Text" name="workingTime" size="4" onkeyup="calculateTakt()"> Net working time (YR)<br>
<input id = "r_taktTime" type="Text" name="taktTime" id="taktTime" size="4"> Takt Time<br><br>
<form method="POST">
<table>
<tr id="dynamicInput">
<td>
Process #1<br>
Units processed (pce) <input id = "c_output" type="Text" name="output" size="4" onkeyup="calculateCycle()"> <br>
Processing time (min) <input id = "c_processingTime" type="Text" name="processingTime" size="4" onkeyup="calculateCycle()"> <br>
setup time (min) <input id = "c_setupTime" type="Text" name="setupTime" size="4" onkeyup="calculateCycle()"> <br><br>
Cycle Time <input id = "r_cycleTime" type="Text" name="cycleTime id="cycleTime" size="4"> <br>
Idle Time <input id = "r_idleTime" type="Text" name="idleTime id="idleTime" size="4"> <br>
</td>
</tr>
</table>
<input type="button" value="Add Step" onClick="addInput('dynamicInput');">
</form>
</html>