我之前问过这个问题，但不得不清理它，难以理解，因为它很混乱，所以现在它归根结底，在代码下面的格式中，我遇到的问题是我想要使用相同的变量添加第二个和第三个方程，可能是第四个，我想我可以添加下面相同格式的另一个方程并且可以工作（不同的 ID），但它不是，它计算一个而不是另一个，它的一台独立的计算机，没有互联网，也不能使用任何插件，已经使用了一段时间，这让我很烦，但我决心让它工作。正在使用它的谷歌浏览器。这可能吗，请任何人帮助。我已将代码重新设置为仅计算一个方程。<!DOCTYPE html><html> <head> </head> <body> <script type="text/javascript"> window.onload = function() { CMCObj = document.getElementById('txtCMC'); WaterObj = document.getElementById('txtWater'); GlycerolObj = document.getElementById('txtGlycerol'); FlowObj = document.getElementById('txtFlow'); FreshObj = document.getElementById('tdFresh'); document.getElementById('btnReset').onclick = resetInputs; document.getElementById('btnCalc').onclick = calcAddition; }; function resetInputs() { CMCObj.value = ''; WaterObj.value = ''; GlycerolObj.value = ''; FlowObj.value = ''; FreshObj.innerHTML = ''; } function calcAddition() { var CMC = new Number(CMCObj.value); var Water = new Number(WaterObj.value); var Glycerol = new Number(GlycerolObj.value); var Flow = new Number(FlowObj.value); FreshObj.innerHTML = ''; if (isNaN(CMC) || isNaN(Water)) { alert('Invalid CMC or Water'); return; } FreshObj.innerHTML = Math.round( ((CMC + Water + Glycerol) / (CMC + Water + Glycerol + Flow)) * 100 ); } </script>
1 回答
梵蒂冈之花
TA贡献1900条经验 获得超5个赞
好的，我对您的代码进行了一些更改，使您的计算器完全动态化。如果您将 FormMaker 函数的 TotalForms 变量更改为任意数字……这就是它将为您制作的计算器数量。请享用
:)
另外，我差点忘了提。您的 JS 脚本需要放在 HTML 文档的末尾，而不要放在最上面。有多种方法可以将您的 JS 放在顶部，但应该使用内置的解决方法来完成，以避免代码中出现错误。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>My Calculator</title>
</head>
<body>
<div id="FormArea"></div>
<script type="text/javascript">
//setTimeout(FormMaker, 0);
(function StartingApp(){
setTimeout(FormMaker, 6);
})();
function FormMaker() {
let TotalForms = 3,
i,
fragment,
div,
htmlText,
Location = document.querySelector('#FormArea');
console.log(Location);
for (i = 0; i < TotalForms; i++) {
console.log('hello');
fragment = document.createDocumentFragment();
div = document.createElement('div');
htmlText = `
<h2>Amazing Calculator ${i+1}</h2>
<table>
<tr>
<td><label for="txtCMC">Total CMC Injection (ml)</label></td>
<td><input type="text" id="txtCMC${i}" /></td>
</tr>
<tr>
<td><label for="txtWater">Total Water Injection (ml)</label></td>
<td><input type="text" id="txtWater${i}" /></td>
</tr>
<tr>
<td><label for="txtGlycerol">Total Glycerol Injection (%)</label></td>
<td><input type="text" id="txtGlycerol${i}" /></td>
</tr>
<tr>
<td><label for="txtFlow">Plasticiser Flow (Lhr)</label></td>
<td><input type="text" id="txtFlow${i}" /></td>
</tr>
<tr>
<td>Total Fresh Injection (%)</td>
<td id="tdFresh${i}"></td>
</tr>
<tr>
<td></td>
<td>
<button id="btnReset${i}" onclick = "resetInputs()">Reset</button>
<button id="btnCalc${i}" onclick = "calcAddition()">Calculate</button>
</td>
</tr>
</table>
`;
div.className = 'FormContainers';
div.innerHTML = htmlText;
fragment.appendChild(div);
Location.appendChild(fragment);
};
};
function resetInputs() {
let i,
TotalForms = document.getElementsByClassName("FormContainers").length;
for (i = 0; i < TotalForms; i++) {
let CMCObj = document.getElementById(`txtCMC${i}`),
WaterObj = document.getElementById(`txtWater${i}`),
GlycerolObj = document.getElementById(`txtGlycerol${i}`),
FlowObj = document.getElementById(`txtFlow${i}`),
FreshObj = document.getElementById(`tdFresh${i}`);
CMCObj.value = '';
WaterObj.value = '';
GlycerolObj.value = '';
FlowObj.value = '';
FreshObj.innerHTML = '';
};
};
function calcAddition() {
let i,
TotalForms = document.getElementsByClassName("FormContainers").length;
for (i = 0; i < TotalForms; i++) {
let CMC = document.getElementById(`txtCMC${i}`).value,
Water = document.getElementById(`txtWater${i}`).value,
Glycerol = document.getElementById(`txtGlycerol${i}`).value,
Flow = document.getElementById(`txtFlow${i}`).value,
FreshObj = document.getElementById(`tdFresh${i}`);
FreshObj.innerHTML = '';
if(isNaN(CMC) || isNaN(Water)) {
alert(`Invalid CMC or Water on Amazing Calculator ${i}`);
return;
}
FreshObj.innerHTML = Math.round(((CMC+Water+Glycerol)/(CMC+Water+Glycerol+Flow)*100));
};
};
</script>
<style>
#FormArea{
display: flex;
flex-wrap: wrap;
}
</style>
</body>
</html>
添加回答
举报
0/150
提交
取消