如何更改颜色值<input type="color"/>页面何时加载？

Question

我正在尝试制作一个网页，允许用户通过颜色输入选择颜色，并且页面应该将他们的选择存储在 localStorage 中。 理想情况下，用户应该仍然能够在下次打开页面时查看他们制作的调色板。

我的问题是颜色输入的值不会随我的 javascript 代码更新。 我尝试编写window.onload，甚至在标签中插入“onload()”。 他们都没有工作。 输入仍然显示相同的默认颜色值，即纯黑色。 我真的可以使用一些帮助来解决这个问题。

非常感谢~

这是我的 HTML 代码：

<body onload="getColor()">
    <div class="container">
        <div id="mySidebar" class="sidebar">
            <label class="noteLabel">C</label>
            <input type="color" id="color0" name="color" onchange="handleChange(this.value, this.id)" />
            <label class="noteLabel">F#</label>
            <input type="color" id="color6" name="color"
                onchange="handleChange(this.value, this.id)" /><br />
            <label class="noteLabel">C#</label>
            <input type="color" id="color1" name="color" onchange="handleChange(this.value, this.id)" />
            <label class="noteLabel">G</label>
            <input type="color" id="color7" name="color" 
                onchange="handleChange(this.value, this.id)" /><br />
            <label class="noteLabel">D</label>
            <input type="color" id="color2" name="color" onchange="handleChange(this.value, this.id)" />
            <label class="noteLabel">G#</label>
            <input type="color" id="color8" name="color" 
                onchange="handleChange(this.value, this.id)" /><br />
            <label class="noteLabel">D#</label>
            <input type="color" id="color3" name="color" onchange="handleChange(this.value, this.id)" />
            <label class="noteLabel">A</label>
            <input type="color" id="color9" name="color" 
                onchange="handleChange(this.value, this.id)" /><br />
            <label class="noteLabel">E</label>
            <input type="color" id="color4" name="color" onchange="handleChange(this.value, this.id)" />
            <label class="noteLabel">A#</label>
            <input type="color" id="color10" name="color" 
                onchange="handleChange(this.value, this.id)" /><br />
            <label class="noteLabel">F</label>
            <input type="color" id="color5" name="color" onchange="handleChange(this.value, this.id)" />
            <label class="noteLabel">B</label>
            <input type="color" id="color11" name="color"
                onchange="handleChange(this.value, this.id)" /><br />
        </div>
    </div>
</body>

以下是我用来更改默认颜色值的 JavaScript 代码：

var customColor = [[255, 0, 0], [255, 0, 0], [255, 0, 0], [255, 0, 0], [255, 0, 0], [255, 0, 0], [255, 0, 0], [255, 0, 0], [255, 0, 0], [255, 0, 0], [255, 0, 0], [255, 0, 0]];

window.onload = function () {
    customColor.forEach((item, index) => {
        let tem_id = "color" + index
        console.log(rgbToHex(item))
        document.getElementById(tem_id).setAttribute('defaultValue', '#' + rgbToHex(item));
    })
}

function getColor(){
    customColor.forEach((item, index) => {
        let tem_id = "color" + index
        console.log(rgbToHex(item))
        document.getElementById(tem_id).setAttribute('defaultValue', '#' + rgbToHex(item));
    })
}

Answer 1

请使用value而不是defaultValue 。 看下面的代码：

 document.getElementById("color11").value = "#ff0000";

 <input type="color" id="color11" name="color" onchange="handleChange(this.value, this.id)" />

Answer 2

我刚刚弄清楚我的代码有什么问题。 结果是我定义的函数rgbToHex()工作不正常，所以接收到的值输入元素的格式不正确。 直到现在我才注意到这一点，因为控制台仅将这个问题作为警告提及。

如何更改颜色值<input type="color"/>页面何时加载？

问题描述

2 个解决方案

解决方案1
0 2020-03-30 20:29:36

解决方案2
0 已采纳 2020-04-12 02:04:03

如何更改颜色值<input type="color"/>页面何时加载？

问题描述

2 个解决方案

解决方案1 0 2020-03-30 20:29:36

解决方案2 0 已采纳 2020-04-12 02:04:03

解决方案1
0 2020-03-30 20:29:36

解决方案2
0 已采纳 2020-04-12 02:04:03