如何在对象中存储html属性

How do I store html properties in an object?

本文关键字：存储 html 属性 对象      更新时间：2023-09-26

我第一次体验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);
 }

我的问题是：这有多错误，如何纠正？非常感谢。

我不确定您的问题到底是什么，但查看Save的代码，我认为您正在询问如何在应用程序的上下文中最好地存储数据。查看Save方法主体：

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

这些变量仅在Save函数的作用域中可用。因此，"colors"-对象将只包含一个单色对象，即在Save函数中创建的"nextColor"对象。最重要的是，"colors"-Object在Save函数之外是不可访问的，这会渲染它……嗯，毫无用处。

理想情况下，您将"colors"-对象的内容保存在全局变量中（或在应用程序可用的另一个对象中引用它，即"Model"），并用Save方法的返回填充colors对象，即：

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方法的唯一功能是收集HTML文档中输入的值，并将其转换为新的值Object。Save方法现在不需要知道属于应用程序的任何剩余数据。（即，"colors"对象及其"nextColor"数组的创建应该留给另一个函数，最好在应用程序启动时执行）。

我想我想说的是，你走在了正确的轨道上，但通过投入一些时间创建单独的函数来处理你的数据层，你可以获得很多里程。毕竟，这就是JSON的全部，数据。

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

我希望这就是你想要的答案。

试试这个：

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()函数的单独运行之外保留该变量。我还简化了代码。

相关文章：