Я пытаюсь создать веб-страницу, которая позволяет пользователям выбирать цвет с помощью ввода цвета, и страница должна сохранять свой выбор в 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));
})
}