html/javascript代码中的多重计算——文本框数据输入
我之前问过这个问题，但不得不清理它，难以理解，因为它很混乱，所以现在它归根结底，在代码下面的格式中，我遇到的问题是我想要使用相同的变量添加第二个和第三个方程，可能是第四个，我想我可以添加下面相同格式的另一个方程并且可以工作（不同的 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>
紫衣仙女浏览 230回答 1
1回答
-
梵蒂冈之花
好的，我对您的代码进行了一些更改，使您的计算器完全动态化。如果您将 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>
随时随地看视频慕课网APP
相关分类
JavaScript