如何保存和显示用户输入答案

【问题标题】：How to Save and Display user input如何保存和显示用户输入
【发布时间】：2018-07-05 13:00:42
【问题描述】：

我正在尝试获取用户输入（债务），保存到本地存储，并将用户输入显示到 div（结果）以获取结果。当我点击提交按钮时，没有任何反应。我希望它做的是将债务输入推送到数组，然后将其发布到结果 div。

HTML：

    <form id="myForm">

这是输入开始的地方，有3种不同的；姓名、金额和到期日期

    <!-- entering debt name -->
    <div class="name" id="name">
      <label>Debt Name: </label>
      <input type="text" class="debtname" id="debtname">
    </div>

    <!-- entering debt amount -->
    <div class="amount" id="amount">
      <label>Amount: </label>
      <input type="number" class="debtamount" id="debtamount">
    </div>

    <!-- entering debt due date -->
    <div class="due" id="due">
      <label>Due Date: </label>
      <input type="number" class="debtdue" id="debtdue" min="1" max="31">
    </div>      

    <!-- sumbitting debt information -->
    <input type="button" class="submitdebt" id="submitdebt" onclick="insert()" value="Submit"/>
    </form>

这是我希望发布结果的 div

    <!-- input results -->
    <div class="results" id="results"></div>

  </div>
</div>

JavaScript：

document.getElementById('myForm').addEventListener('submit', saveDebt);

// Save Debt
function saveDebt(e) {
   // Get form values
   var debtName = document.getElementById('debtname').value;
   var debtAmount = document.getElementById('debtamount').value;
   var debtDue = document.getElementById('debtdue').value;

   if(!validateForm(debtName, debtAmount, debtDue)) {
      return false;
   }

我希望将所有输入作为一个对象放入一个数组中

   var debtObject = {
     name: debtName,
     amount: debtAmount,
     due: debtDue
   }

这是我认为主要问题的地方，我不认为输入被推入数组

   // Test if debts is null
   if(localStorage.getItem('debts') === null) {
      // Init array
      var debts = [];
      // Add to array
      debts.push(debtObject);
      // Set to localStorage
      localStorage.setItem('debts', JSON.stringify(debts));
    } else {
      // Get debts from localStorage
      var debts = JSON.parse(localStorage.getItem('debts'));
      // Add debt to array
      debts.push(debtObject);
      // Re-set back to localStorage
      localStorage.setItem('debts', JSON.stringify(debts));
    }

// Clear form
document.getElementById('myForm').reset();

// Re-fetch debts
fetchDebts();

// Prevent form from submitting
e.preventDefault();
}

这是将结果打印到结果div的函数

// Fetch debts
function fetchDebts() {
   // Get debts from localStorage
   var debts = JSON.parse(localStorage.getItem('debts'));
   // Get output id
   var results = document.getElementById('results');

   // Build output
   results.innerHTML = '';
   for( var i = 0; i < debts.length; i++) {
      var name = debts[i].name;
      var amount = debts[i].amount;
      var due = debts[i].due;

      results.innerHTML += '<div class="well">'+
                                            '<p>' + 'Name: ' + name +
                                            'Amount: ' + amount +
                                            'Due: ' + due +
                                            '</h3>'+
                                            '</div>';
     }
}

// Validate Form
function validateForm(debtName, debtAmount, debtDue) {
   if(!debtName || !debtAmount || !debtDue) {
      alert('Please fill in the form');
      return false;
   }

   return true;
}
// modal end

【问题讨论】：

这看起来与 Java 没有任何关系。请尝试找出您尝试编写代码的语言的名称，并适当地标记您的问题。
这是 JavaScript，不是 Java。请更新您的问题。 :-)
我刚刚试过你的代码，它工作得很好jsfiddle.net/tmjsk75u/7 =)

标签： javascript arrays local-storage

【解决方案1】：

我创建了一个 jsfiddle，以便更轻松地在此处调试您的代码（并对其进行了修复）-http://jsfiddle.net/9ra0dhtg/6/

我注意到你的代码中有：

<input type="button" class="submitdebt" id="submitdebt" onclick="insert()" value="Submit"/>

我假设你想在这里打电话给saveDebt。如果没有，由于您正在尝试处理表单提交事件，您应该将其创建为表单提交输入 (type="submit") 并删除 onclick 处理程序，其余流程将按您的预期工作。

【讨论】：