Speichern von Benutzereingaben in JavaScript Array und Anzeigen

Question

Ich muss Javascript und jquery verwenden, um Benutzereingaben aus einem Formular zu nehmen und in ein Protokoll zu speichern, das dann vom Benutzer aufgerufen werden kann.

Mein Denken war dies zu erreichen, indem zuerst die Benutzereingabe in einem Array gespeichert wurde. Ich konnte dies erfolgreich mit 1 Eingabe machen, aber ich habe kein Glück mit mehreren Eingaben.

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; 

Wie gehe ich vor, um mehrere Felder zu speichern? (zB Leitfähigkeit + Spannung + Blah)

EDIT: Ich sagte ursprünglich, ich wollte es als String zurückgegeben. Zur Verdeutlichung möchte ich etwas in dieser Richtung in einer neuen Seite anzeigen: 19/04/2016 Leitfähigkeit: 42, Spannung: 11, Blah: 0

Answer 1

Sie können dann ein Objekt erstellen (vermeidet globale Variablen außer es) Speicher Sachen darin, einschließlich der Funktionen die du brauchst (Namespaced) zu benutzen!

Hier können Sie es ausprobieren: https://jsfiddle.net/MarkSchultheiss/bacy1r18/1/

Beispiel Markup:

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> 

Code:

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