如何保存 JavaScript 输出并同时显示它们？答案

【问题标题】：How can i save JavaScript outputs and show them at the same time?如何保存 JavaScript 输出并同时显示它们？
【发布时间】：2020-11-22 05:50:43
【问题描述】：

所以我想为自己制作一个初学者应用程序来计算我的工作工资。我每两周收到一次报酬，还有公里数。我的问题是每次我点击“添加”按钮时它应该输出我的输入然后清除自己，当我做另一个时它应该在下面显示它等等。此外，我想将其保存在本地存储中，以计算每 2 周的最终支付结束。任何建议都值得赞赏，我是初学者，所以请放轻松。

function myFunction() {
  //week dropdown
  var e = document.getElementById("week");
  var strUser = e.options[e.selectedIndex].text;
  document.getElementById("wek").innerHTML = strUser;
  //day dropdown
  var d = document.getElementById("day");
  var days = d.options[d.selectedIndex].text;
  document.getElementById("mf").innerHTML = days;
  //start
  var s = document.getElementById("start").value;
  document.getElementById("strt").innerHTML = s;
  //End
  var a = document.getElementById("end").value;
  document.getElementById("ed").innerHTML = a;
  //Hrs
  var h = document.getElementById("hrs").value;
  document.getElementById("hrss").innerHTML = h;
  //KM
  var k = document.getElementById("km").value;
  document.getElementById("kmm").innerHTML = k;
  //KM pay
  var kmpay = k * 0.5;
  document.getElementById("kmpays").innerHTML = kmpay;
  //Hr pay
  var hrpay = h * 18;
  document.getElementById("hrpays").innerHTML = hrpay;

}

<body>
  <h2>Time Tracker</h2>
  <table>
    <tr>
      <th>Week</th>
      <th>Day</th>
      <th>Start</th>
      <th>End</th>
      <th>Hrs</th>
      <th>KM</th>
    </tr>
    <tr>
      <td>
        <select id="week">
          <option>1</option>
          <option>2</option>
        </select>
      </td>
      <td>
        <select id="day">
          <option>Monday</option>
          <option>Tuesday</option>
          <option>Wednsday</option>
          <option>Thursday</option>
          <option>Friday</option>
        </select>
      </td>
      <td><input type="number" id="start" style="max-width: 45px;"></td>
      <td><input type="number" id="end" style="max-width: 45px;"></td>
      <td><input type="number" id="hrs" style="max-width: 45px;"></td>
      <td><input type="number" id="km" style="max-width: 45px;"></td>
    </tr>
  </table>
  <button id="btn" onclick="myFunction()">Add</button>
  <h3></h3>
  <table>
    <tr>
      <th>Week</th>
      <th>Day</th>
      <th>Start</th>
      <th>End</th>
      <th>Hrs</th>
      <th>KM</th>
      <th>HrPay</th>
      <th>KMpay</th>
    </tr>
    <tr>
      <td id="wek">..</td>
      <td id="mf">..</td>
      <td id="strt">..</td>
      <td id="ed">..</td>
      <td id="hrss">..</td>
      <td id="kmm">..</td>
      <td id="hrpays">$</td>
      <td id="kmpays">$</td>
    </tr>
  </table>
</body>

【问题讨论】：

为什么要添加 Android 作为标签？
欢迎您！我并不是要翻转或迂腐，但是“我的问题是，每次我单击“添加”按钮时，它都应该输出我的输入，然后自行清除，当我再做一次时，它应该在下面显示，依此类推。”实际上不是一个问题。没有明确的问题，很难给出明确的答案。您能否描述您面临的问题，但说明期望的行为和实际行为，以及它们有何不同？查看How to Ask 并将您的代码精简为minimal reproducible example 可能会有所帮助。祝你好运，编码愉快！

标签： javascript android html forms

【解决方案1】：

您确定要这样做吗？每次刷新页面时，您都会丢失数据。我会做的是：

将数据存储在 JSON 文件中。
在打开页面时，我会读取 JSON 文件并将数据存储在多维数组中。
使用 array.push() 添加新条目。
然后我会迭代数组 -Array.forEach() 等 - 以显示在页面上。
最后，将新数组存储在该 JSON 文件中。

【讨论】：

【解决方案2】：

如果我理解正确你想要什么...

"myFunction ()" 获取输入的数据并将其添加到表中。我在每一行都添加了一个“删除”按钮。 “删除”按钮删除相应的行。

“calcTotals()”函数取“HrPay”和“KMpay”的值，计算最终结果的总和。

“myTrackerData()”函数检查本地内存中是否有可用的记录，如果有，则将它们加载到表中。

“saveData()”函数从表中取出数据并保存到本地存储。如果您从表中添加或删除数据以将更改保存在本地存储中，则必须单击“保存”按钮。

如何保存 JavaScript 输出并同时显示它们？

您可以很容易地做到这一点，每次更改都会自动（无需按下保存按钮）将信息保存在本地存储中。通过在“calcTotals()”函数末尾调用“saveData()”函数。

请复制此代码并在本地测试。 由于 StackOverflow 中使用本地存储的限制，您需要在本地复制和测试代码。

我尝试编写代码，以便现在正在学习 JS 的人能够理解它。希望对您有所帮助

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


    <h2>Time Tracker</h2>
    <table>
        <tr>
            <th>Week</th>
            <th>Day</th>
            <th>Start</th>
            <th>End</th>
            <th>Hrs</th>
            <th>KM</th>
        </tr>
        <tr>
            <td>
                <select id="week">
                    <option>1</option>
                    <option>2</option>
                </select>
            </td>
            <td>
                <select id="day">
                    <option>Monday</option>
                    <option>Tuesday</option>
                    <option>Wednsday</option>
                    <option>Thursday</option>
                    <option>Friday</option>
                </select>
            </td>
            <td><input type="number" id="start" style="max-width: 45px;"></td>
            <td><input type="number" id="end" style="max-width: 45px;"></td>
            <td><input type="number" id="hrs" style="max-width: 45px;"></td>
            <td><input type="number" id="km" style="max-width: 45px;"></td>
        </tr>
    </table>

    <button id="btn" onclick="myFunction()">Add</button>

    <h3></h3>

    <table id="myTable">
        <tr>
            <th>Week</th>
            <th>Day</th>
            <th>Start</th>
            <th>End</th>
            <th>Hrs</th>
            <th>KM</th>
            <th>HrPay</th>
            <th>KMpay</th>
            <th></th>
        </tr>
    </table>

    <div id="total"></div>

    <button id="btn" onclick="saveData()">Save</button>





    <script>

        var my_table = document.getElementById('myTable');

        function myTrackerData() {
            var retrievedData = localStorage.getItem("myTracker");
            if (retrievedData) {
                var myValue = JSON.parse(retrievedData);
                var trackerData = myValue.myTracker;

                for (var i = 0; i < trackerData.length; i++) {
                    // Add Data in table
                    my_table.innerHTML += '<tr id="' + trackerData[i][0] + '">' + '<td class="wek">' + trackerData[i][1] + '</td><td class="mf">' + trackerData[i][2] + '</td><td class="strt">' + trackerData[i][3] + '</td><td class="ed">' + trackerData[i][4] + '</td><td class="hrss">' + trackerData[i][5] + '</td><td class="kmm">' + trackerData[i][6] + '</td><td class="hrpays">' + trackerData[i][7] + '</td><td class="kmpays">' + trackerData[i][8] + '</td><td class="del">' + trackerData[i][9] + '</td>' + '</tr>';
                }

                calcTotals();
            }
        }

        myTrackerData();


        function saveData() {
            var myTrackerArray = [];
            var x = my_table.getElementsByTagName('tr');

            for (var i = 1; i < x.length; i++) {
                myTrackerArray.push(
                    [
                        x[i].getAttribute('id'),
                        x[i].getElementsByClassName('wek')[0].innerHTML,
                        x[i].getElementsByClassName('mf')[0].innerHTML,
                        x[i].getElementsByClassName('strt')[0].innerHTML,
                        x[i].getElementsByClassName('ed')[0].innerHTML,
                        x[i].getElementsByClassName('hrss')[0].innerHTML,
                        x[i].getElementsByClassName('kmm')[0].innerHTML,
                        x[i].getElementsByClassName('hrpays')[0].innerHTML,
                        x[i].getElementsByClassName('kmpays')[0].innerHTML,
                        x[i].getElementsByClassName('del')[0].innerHTML
                    ]
                );
            }

            var trackerData = ({ myTracker: myTrackerArray });
            localStorage.setItem("myTracker", JSON.stringify(trackerData));
        }


        function myFunction() {
            //week dropdown
            var e = document.getElementById("week");
            var strUser = e.options[e.selectedIndex].text;
            //day dropdown
            var d = document.getElementById("day");
            var days = d.options[d.selectedIndex].text;
            //start
            var s = document.getElementById("start").value;
            //End
            var a = document.getElementById("end").value;
            //Hrs
            var h = document.getElementById("hrs").value;
            //KM
            var k = document.getElementById("km").value;
            //KM pay
            var kmpay = k * 0.5;
            //Hr pay
            var hrpay = h * 18;
            // Unic id
            var unicID = new Date().getUTCMilliseconds();

            // Add Data in table
            var newData = '<tr id="' + unicID + '">' + '<td class="wek">' + strUser + '</td><td class="mf">' + days + '</td><td class="strt">' + s + '</td><td class="ed">' + a + '</td><td class="hrss">' + h + '</td><td class="kmm">' + k + '</td><td class="hrpays">' + kmpay + '</td><td class="kmpays">' + hrpay + '</td><td class="del"><button onclick="funcDelete(' + unicID + ');">del</button></td>' + '</tr>';

            my_table.innerHTML += newData;

            calcTotals();
        }


        function funcDelete(x) {
            document.getElementById(x).remove();
            calcTotals();
        }



        function calcTotals() {
            var total = document.getElementById('total');
            var hrpays = document.getElementsByClassName('hrpays');
            var kmpays = document.getElementsByClassName('kmpays');

            var hr = 0;
            var km = 0;
            for (var i = 0; i < hrpays.length; i++) {
                hr = +hrpays[i].innerHTML + hr;
                km = +kmpays[i].innerHTML + km;
            }

            total.innerHTML = 'Total HrPay: ' + hr + 'Total KMpay: ' + km;
        }

    </script>


</body>
</html>

【讨论】：