Question

我第一次使用javascript对象进行操作并需要一些帮助。我想将生成的用户输入存储在对象中，将它们推送到数组中，然后重新使用它们。到目前为止，我已经达到了这个目标：

 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;

这里我得到了我需要存储的所有输入，并且在下一个函数中我试图将它存储在一个对象和数组中：

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

我的问题是：这是错误的以及如何纠正？谢谢！

Answer 1

我不确定你的问题究竟是什么，但是看看你的代码我假设你正在询问如何在应用程序的上下文中最好地存储数据。查看Save-method正文：

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

这些变量仅在“保存”功能的范围内可用。因此，“colors”-Object将只包含一个单一颜色的Object，即在Save函数中创建的“nextColor”对象。除此之外，“颜色” - 对象在保存功能之外是不可访问的，呈现它......好吧，没用。

理想情况下，您将“colors”-Object的内容保存在全局变量中（或在应用程序可用的另一个Object中引用它，即“模型”），并使用Save-method的返回填充颜色Object ，即：

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

这意味着Save-methods唯一功能是收集在HTML文档中输入的值，并将其转换为新值Object。 Save-method现在无法了解属于您的应用程序的任何剩余数据。（即创建“colors”对象及其“nextColor”--Array应留给另一个函数，理想情况是在应用程序启动时执行）。

我想我所说的是你在正确的轨道上，但你可以花一些时间来创建单独的功能来处理你的数据层，从而获得大量的里程。毕竟，所有JSON都是数据。

例如，如果您想在Save（） - 方法中输入验证（假设确保“name”输入元素实际上包含有效的String），您只需在那个函数中修改它。如果您还希望确保相同的颜色没有添加到“nextColor”--Array两次，您可以创建另一个函数来检查数据对象中是否已存在具有相同值的颜色并将其删除或阻止将重复值推送到数组中。这是不应该在Save（）方法中的逻辑，因此您可以构建程序以整齐地组织数据。

我希望这是您正在寻找的答案。

Answer 2

试试这个：

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

请注意，colors变量应该超出函数的范围，以便将变量保留在Save()函数的单个运行之外。我也简化了代码。

如何在对象中存储html属性？

2 个答案: