Saya telah mengajukan pertanyaan ini sebelumnya tetapi harus membersihkannya, sulit untuk diikuti, karena berantakan, jadi sekarang menjadi tulang punggung, dalam format di bawah kode berfungsi, masalah yang saya alami adalah saya ingin tambahkan persamaan kedua dan ketiga menggunakan variabel yang sama, mungkin seterusnya, saya pikir saya bisa menambahkan persamaan lain dalam format yang sama di bawah ini dan akan berfungsi (ID berbeda), tetapi tidak, itu menghitung satu dan bukan yang lain, untuk komputer yang berdiri sendiri, tidak ada internet, tidak dapat menggunakan plugin apa pun, sudah lama menggunakannya dan itu mengganggu saya, tetapi saya bertekad untuk membuatnya berfungsi. Google chrome-nya sedang digunakan. Apakah ini mungkin, ada yang bisa membantu. Saya telah mengatur kembali kode untuk menghitung hanya satu persamaan.

<!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>

        <table>
            <tr>
                <td><label for="txtCMC">Total CMC Injection (ml)</label></td>
                <td><input type="text" id="txtCMC" /></td>
            </tr>
            <tr>
                <td><label for="txtWater">Total Water Injection (ml)</label></td>
                <td><input type="text" id="txtWater" /></td>
            </tr>
            <tr>
                <td><label for="txtGlycerol">Total Glycerol Injection (%)</label></td>
                <td><input type="text" id="txtGlycerol" /></td>
            </tr>
            <tr>
                <td><label for="txtFlow">Plasticiser Flow (Lhr)</label></td>
                <td><input type="text" id="txtFlow" /></td>
            </tr>
            <tr>
                <td>Total Fresh Injection (%)</td>
                <td id="tdFresh"></td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button id="btnReset">Reset</button
                    ><button id="btnCalc">Calculate</button>
                </td>
            </tr>
        </table>
    </body>
</html>

Memperbaiki kode di bawah ini dan berfungsi, terima kasih atas bantuannya

<!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');
        FreshCMCObj = document.getElementById('tdFreshCMC');
        FreshGlycerolObj = document.getElementById('tdFreshGlycerol');
        document.getElementById('btnReset').onclick = resetInputs;
                document.getElementById('btnCalc').onclick = calcAddition;
            }
            function resetInputs() {
                CMCObj.value = '';
        WaterObj.value = '';
                GlycerolObj.value = '';
                FlowObj.value = '';
                FreshObj.innerHTML = '';
        FreshCMCObj.innerHTML = '';
        FreshGlycerolObj.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;
        }
        FreshCMCObj.innerHTML = '';
                if(isNaN(CMC) || isNaN(Water)) {
                    alert('Invalid CMC or Water');
                    return;
        }
        FreshGlycerolObj.innerHTML = '';
                if(isNaN(CMC) || isNaN(Water)) {
                    alert('Invalid CMC or Water');
                    return;
        }
                FreshObj.innerHTML = Math.round(((CMC+Water+Glycerol)/(CMC+Water+Glycerol+Flow)*100));
        FreshCMCObj.innerHTML = Math.round(((CMC)/(CMC+Water+Glycerol+Flow)*100));
        FreshGlycerolObj.innerHTML = Math.round(((CMC+Water+Glycerol)/(CMC+Water+Glycerol+Flow)*100));
                }

        </script>

        <table>
            <tr>
                <td><label for="txtCMC">Total CMC Injection (ml)</label></td>
                <td><input type="text" id="txtCMC" /></td>
            </tr>
        <tr>
                <td><label for="txtWater">Total Water Injection (ml)</label></td>
                <td><input type="text" id="txtWater" /></td>
            </tr>
            <tr>
                <td><label for="txtGlycerol">Total Glycerol Injection (%)</label></td>
                <td><input type="text" id="txtGlycerol" /></td>
            </tr>
        <tr>
                <td><label for="txtFlow">Plasticiser Flow (Lhr)</label></td>
                <td><input type="text" id="txtFlow" /></td>
            </tr>
            <tr>
                <td>Total Fresh Injection (%)</td>
                <td id="tdFresh"></td>
            </tr>
        <tr>
                <td>Total Fresh CMC Injection (%)</td>
                <td id="tdFreshCMC"></td>
            </tr>
        <tr>
                <td>Total Fresh Glycerol Injection (%)</td>
                <td id="tdFreshGlycerol"></td>
            </tr>
            <tr>
                <td></td>
                <td><button id="btnReset">Reset</button><button id="btnCalc">Calculate</button></td>
            </tr>
        </table>

</body>
</html>
-2
Millyboy 24 Oktober 2019, 04:41

1 menjawab

Jawaban Terbaik

Baiklah, saya membuat beberapa perubahan pada kode Anda membuat kalkulator Anda sepenuhnya dinamis. Jika Anda mengubah variabel TotalForms fungsi FormMaker ke angka apa pun... itulah berapa banyak kalkulator yang akan dibuat untuk Anda. Nikmati

:)

Juga, saya hampir lupa menyebutkannya. Skrip JS Anda harus ditempatkan di akhir dokumen HTML Anda dan tidak pernah di atas. Ada beberapa cara untuk menempatkan JS Anda di atas, tetapi itu harus dilakukan dengan solusi bawaan untuk menghindari kesalahan dalam kode Anda.

    <!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>
1
Jose Gomez 24 Oktober 2019, 04:03