如何在對象中存儲html屬性？

我第一次嘗試javascript對象，需要一些幫助。我想將生成的用戶輸入存儲在對象中，將它們推送到一個數組中，然後再重用它們。到目前爲止，我已經來到了這個：如何在對象中存儲html屬性？

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

我的問題是：這是多麼的錯誤，以及如何糾正？謝謝！

來源

2013-12-18 Henry Lynx

我會用一個問題來回答：你遇到的問題是什麼？我可以看到至少有一個nextColor的重複定義的問題，但我不知道這是你在找什麼。 – Aioros

我不確定你的問題到底是什麼，但看着你的代碼保存我假設你正在詢問如何最好地將數據存儲在應用程序的上下文中。查看Save-method正文：

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

這些變量僅在Save函數的作用域中可用。這樣的「顏色」 - 對象將只包含一個單一顏色的對象，即在保存功能中創建的「下一個顏色」對象。最重要的是，「顏色」-Object不能在Save函數之外訪問，從而渲染它......好吧，沒用。

理想情況下，您可以在全局變量中保存「顏色」對象的內容（或將其引用到可用於您的應用程序的另一個對象中，即「模型」），並使用Save-方法，即：

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現在不知道任何屬於您的應用程序的剩餘數據。（即創建「顏色」對象及其「下一個顏色」 - 陣列應留給另一個功能，理想情況下應用程序啓動時執行）。

我想我說的是你在正確的軌道上，但通過投入一些時間來創建單獨的函數來處理數據層，你可以獲得很多里程。畢竟，這就是所有的JSON，數據。（例如，要確保「名稱」輸入元素實際上包含有效的字符串），您只需在該函數中對其進行修改即可。如果您另外希望確保相同的顏色不會添加到「nextColor」 - 陣列兩次，您可以創建另一個函數來檢查具有相同值的顏色是否已經存在於數據對象中並將其移除或阻止將重複值推送到數組中。這是不應該存在於Save（）方法中的邏輯，因爲您可以構造程序來整齊地整理數據。

我希望這是您正在尋找的答案。

來源

2013-12-18 09:59:42

試試這個：

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()功能的單獨運行的變量函數的範圍之外。我也簡化了代碼。

來源

2013-12-18 09:51:51 forsvunnet

如何在對象中存儲html屬性？

回答

相關問題