javascript - 将用户输入存储在 javascript 数组中并显示它

Question

我必须使用 javascript 和 jquery 从表单获取用户输入并将其保存到日志中，然后用户可以调用该日志。

我的想法是通过首先将用户输入存储在数组中来实现此目的。我已经能够通过 1 个输入成功完成此操作，但对于多个输入却没有成功。

var d = new Date();
var arr = [];

var arr = document.getElementById("conductivity").value;
document.getElementById("demoX").innerHTML = arr;


function myX() {
    arr.push(d + conductivity.value);
    document.getElementById("demoX").innerHTML = arr;

如何存储多个字段？ (比如电导率+电压+废话)

编辑:我最初说我希望它作为字符串返回。为了澄清这一点，我想在新页面中显示一些内容:2016 年 4 月 19 日电导率:42，电压:11，废话:0

Answer 1

您可以创建一个对象(避免除它之外的全局变量)，然后在其中存储内容，包括您需要(命名空间)使用的函数!

您可以在这里尝试一下:https://jsfiddle.net/MarkSchultheiss/bacy1r18/1/

示例标记:

Cond:
<input id="conductivity" value="100" /> Blah
<input id="blah" value="bluesblah"> Volt
<input id="voltage" value="100" /> Date
<input id="mydate" type="date" />
<button id="save" type="button">
  save
</button>
<button id="show" type="button">
  show
</button>
<div id="demoX">
</div>

代码:

var myThings = myThings || {}
myThings.values = {
  outputs: [],
  labels: {
    d: "",
    c: "Conductivity",
    v: "Voltage",
    b: "Blah"
  },
  defaultDate: new Date()
};
myThings.library = {
  formatdate: function(mydate) {
    var d = new Date(mydate);
    var day = d.getDate();
    var month = d.getMonth() + 1;
    var year = d.getFullYear();
    return day + '/' + month + '/' + year;
  },
  saveEm: function() {
    var cond = document.getElementById("conductivity").value;
    var volt = document.getElementById("voltage").value;
    var blah = document.getElementById("blah").value;
    // default to now date
    var d = document.getElementById("mydate").value ? document.getElementById("mydate").value : myThings.values.defaultDate;

    myThings.values.outputs.push({
      d: myThings.library.formatdate(d),
      cond: cond,
      volt: volt,
      blah: blah
    });
  },

  showEm: function() {
    var arout = "";
    for (var i = 0; i < myThings.values.outputs.length; i++) {
      arout += "<div class='outrow'>";
      arout += "<span class='lab'>" + myThings.values.labels.d + "</span>";
      arout += "<span class='outv'>" + myThings.values.outputs[i].d + "</span>";
      arout += "<span class='lab'>" + myThings.values.labels.c + "</span>";
      arout += "<span class='outv'>" + myThings.values.outputs[i].cond + "</span>";
      arout += "<span class='lab'>" + myThings.values.labels.v + "</span>";
      arout += "<span class='outv'>" + myThings.values.outputs[i].volt + "</span>";
      arout += "<span class='lab'>" + myThings.values.labels.b + "</span>";
      arout += "<span class='outv'>" + myThings.values.outputs[i].blah + "</span>";
      arout += "</div>";
    }
    var demo = document.getElementById("demoX");
    demo.innerHTML = arout;
  }
};
var show = document.getElementById("show");
show.addEventListener("click", myThings.library.showEm);
var save = document.getElementById("save");
save.addEventListener("click", myThings.library.saveEm);