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

Storing user input in javascript array and displaying it

本文关键字：数组 显示 javascript 用户 输入 存储      更新时间：2023-09-26

我必须使用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，Blah:0

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

在这里你可以试试：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);
相关文章：