Javascript 如何保存和显示用户输入

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

HTML:

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

   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

//取债
函数{
//从本地存储获取债务
var debtes=JSON.parse（localStorage.getItem（'debtes'）；
//获取输出id
var results=document.getElementById（'results'）；
//构建输出
results.innerHTML=''；
对于（变量i=0；i<0.length；i++）{
var name=债务[i]。名称；
var金额=债务[i]。金额；
到期风险价值=债务[i]。到期；
results.innerHTML+=“”+
“”+“名称：”+名称+
“金额：”+金额+
“到期日：”+到期日+
''+
'';
}
}
//验证表单
函数validateForm（债务人名称、债务人金额、债务人到期日）{
如果（！debtName | | |！debtAmount | |！debtDue）{
警报（“请填写表格”）；
返回false；
}
返回true；
}
//模态端

我创建了一个JSFIDLE，使调试代码变得更容易（并对其进行了修复）——

我注意到您的代码中有：

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

---

我想您可能想在这里调用

saveDebt

。如果没有，因为您正在尝试处理表单提交事件，您应该将其创建为表单提交输入（

type=“submit”

）并删除onclick处理程序，流的其余部分将按您的预期工作。

这看起来与Java无关。请尝试找出您试图编写代码的语言的名称，并适当地标记您的问题。这是JavaScript，而不是Java。请更新您的问题：：-）我刚刚试过你的代码，效果很好=）

   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();
}

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

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