CODEWITHSUNDEEP
javascriptjson
Henry Lynx
Henry Lynx

Reputation: 1129

How do I store html properties in an object?

I am experementing with javascript objects for the first time and need some help. I want to store generated user input in objects, push them into an array and later on reuse them. So far I have come to this: 

 function changeColors() {
//get the numbers from the html
var rd = parseInt(document.getElementById("red").value);
var gr = parseInt(document.getElementById("green").value);
var bl = parseInt(document.getElementById("blue").value);
var op = parseFloat(document.getElementById("opacity").value);


//convert the decimal into hexadecimal

var rdhex = (rd < 16) ? "0" + rd.toString(16) : rd.toString(16);
var grhex = (gr < 16) ? "0" + gr.toString(16) : gr.toString(16);
var blhex = (bl < 16) ? "0" + bl.toString(16) : bl.toString(16);

//concatenate all hex to generate a color
var hexcode = "#" + rdhex + grhex + blhex;

//view the change in the browser
document.getElementById("div").style.backgroundColor = hexcode;
document.getElementById("colordisplay").innerHTML = hexcode;
//change opacity
document.getElementById("div").style.opacity = op;

Here I get all the input that I need to store and in the next function I am trying to store it in an object and array:

 function Save(){
 var colors = {};
 var nextColor = []

 colors.nextColor = nextColor;
 console.log(colors);

 var rgb =  document.getElementById("colordisplay").innerHTML;
 var opacity = document.getElementById("div").style.opacity;
 var name = document.getElementById("name").value;
 var nextColor = {
    "name": name,
    "rgb": rgb,
    "opacity": opacity
        }
 colors.nextColor.push(nextColor);
 console.log(colors);
 }

My question is: is how wrong is that and how it can be corrected? Thank you!

Upvotes: 0

Views: 276

Answers (2)

forsvunnet
forsvunnet

Reputation: 1258

Try this:

var colors = {
  "nextColor": []
};
function Save() {
  colors.nextColor.push({
    "name": document.getElementById("name").value,
    "rgb": document.getElementById("colordisplay").innerHTML,
    "opacity": document.getElementById("div").style.opacity
  });
  console.log(colors);
}

Notice that the colors variable should be outside the scope of the function in order to retain the variable beyond individual runs of the Save() function. I've also simplified the code quite a bit.

Upvotes: 1

igorski
igorski

Reputation: 954

I am unsure what your question exactly is, but looking at your code for Save I assume you're inquiring how to best store data in the context of an application. Looking at the Save-method body:

var colors = {};
var nextColor = [];

These variables are only available in the scope of the Save function. As such the "colors"-Object will only ever contain one single color Object, i.e. the "nextColor" Object created in the Save function. On top of this, the "colors"-Object is not accessible outside of the Save function, rendering it... well, useless.

Ideally you hold the contents of the "colors"-Object in a global variable (or reference it in another Object available to your application, i.e. a "Model") and fill the colors Object with the return of the Save-method, i.e.:

function Save() {
    var rgb =  document.getElementById("colordisplay").innerHTML;
    var opacity = document.getElementById("div").style.opacity;
    var name = document.getElementById("name").value;
    var nextColor = {
        "name": name,
        "rgb": rgb,
        "opacity": opacity
    };
    return nextColor;
 }

 // assume an event handler invoked after a form is submitted, this
 // creates a nextColor and pushes it into the existing colors Object
 function someEventHandler( e ) {
     colors.nextColor.push( Save() );
 }

This implies that the Save-methods sole function is to gather the values entered in the HTML document, and translate it into a new value Object. The Save-method now has no business knowing about any remaining data belonging to your application. (i.e. the creation of the "colors" Object and its "nextColor"-Array should be left to another function, ideally executed when your application launches).

I guess what I'm saying is you're on the right track, but you can get a lot of mileage by investing some time into creating separate functions to handle your data layer. After all, that's all JSON is, data.

If for instance you want to enter validation in your Save()-method (let's say to make sure that the "name" Input element actually contains a valid String), you just modify it there in that one function. If you additionally wish to make sure that the same color isn't added to the "nextColor"-Array twice, you can make another function that checks whether a color with the same values is already present in the data Object and either removes it or prevents pushing the duplicate value into the Array. This is logic that shouldn't be in the Save()-method, as such you can structure your program to organize your data neatly.

I hope this is the answer you were looking for.

Upvotes: 2

Related Questions