猿问

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 放在顶部，但应该使用内置的解决方法来完成，以避免代码中出现错误。&nbsp; &nbsp; <!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <meta name="viewport" content="width=device-width,initial-scale=1">&nbsp; &nbsp; <title>My Calculator</title></head><body><div id="FormArea"></div><script type="text/javascript">//setTimeout(FormMaker, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (function StartingApp(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setTimeout(FormMaker, 6);&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function FormMaker() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let TotalForms = 3,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; i,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fragment,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlText,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Location = document.querySelector('#FormArea');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(Location);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < TotalForms; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('hello');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fragment = document.createDocumentFragment();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div = document.createElement('div');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; htmlText = `&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h2>Amazing Calculator ${i+1}</h2>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><label for="txtCMC">Total CMC Injection (ml)</label></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" id="txtCMC${i}" /></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><label for="txtWater">Total Water Injection (ml)</label></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" id="txtWater${i}" /></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><label for="txtGlycerol">Total Glycerol Injection (%)</label></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" id="txtGlycerol${i}" /></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><label for="txtFlow">Plasticiser Flow (Lhr)</label></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="text" id="txtFlow${i}" /></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>Total Fresh Injection (%)</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td id="tdFresh${i}"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="btnReset${i}" onclick = "resetInputs()">Reset</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button id="btnCalc${i}" onclick = "calcAddition()">Calculate</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; `;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.className = 'FormContainers';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; div.innerHTML = htmlText;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; fragment.appendChild(div);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Location.appendChild(fragment);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; function resetInputs() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let i,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TotalForms = document.getElementsByClassName("FormContainers").length;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < TotalForms; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let CMCObj = document.getElementById(`txtCMC${i}`),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; WaterObj = document.getElementById(`txtWater${i}`),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; GlycerolObj = document.getElementById(`txtGlycerol${i}`),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FlowObj = document.getElementById(`txtFlow${i}`),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FreshObj = document.getElementById(`tdFresh${i}`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; CMCObj.value = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; WaterObj.value = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; GlycerolObj.value = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FlowObj.value = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FreshObj.innerHTML = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; function calcAddition() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let i,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; TotalForms = document.getElementsByClassName("FormContainers").length;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (i = 0; i < TotalForms; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let CMC = document.getElementById(`txtCMC${i}`).value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Water = document.getElementById(`txtWater${i}`).value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Glycerol = document.getElementById(`txtGlycerol${i}`).value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Flow = document.getElementById(`txtFlow${i}`).value,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FreshObj = document.getElementById(`tdFresh${i}`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FreshObj.innerHTML = '';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(isNaN(CMC) || isNaN(Water)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(`Invalid CMC or Water on Amazing Calculator ${i}`);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; FreshObj.innerHTML = Math.round(((CMC+Water+Glycerol)/(CMC+Water+Glycerol+Flow)*100));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; };</script><style>#FormArea{&nbsp; display: flex;&nbsp; flex-wrap: wrap;}</style></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答