Question

在我的选项表单中，我有一些颜色输入，我希望加载它们的预设值，但目前它不会选择并显示它给出的值。

Html：

    <h3 class="option">Search Bar Background Color:</h3>
    <input type="color" class="color searchBarBackground" id="barBackground" name="searchBarBackground">

    <h3 class="option">Search Bar Placeholder Text Color:</h3>
    <input type="color" class="color searchBarPlaceholder" id="placeColor" name="searchBarPlaceholder">

    <h3 class="option">Search Bar Text Color:</h3>
    <input type="color" class="color searchBarText" id="barColor" name="searchBarText">

    <h3 class="option">Go Button Background Color:</h3>
    <input type="color" class="color goButtonBackground" id="goBackground" name="goButtonBackground">

Javascript加载功能：

window.onLoad = loadOptions();

function loadOptions() {
    var defaultBarBackground = '#000000';
    var defaultGoBackground = '#000000';
    var defaultBarColor = '#ffffff';
    var defaultPlaceColor = '#999999';

    chrome.storage.local.get('barBackgroundOption', function (x) { 
        $('#barBackground').attr("value", x.barBackgroundOption);
    });
    chrome.storage.local.get('barColorOption', function (x) {
        $('#barColor').attr("value", x.barColorOption);
    });
    chrome.storage.local.get('placeColorOption', function (x) { 
        $('#placeColor').attr("value", x.placeColorOption);
    });
    chrome.storage.local.get('goBackgroundOption', function (x) { 
        $('#goBackground').attr("value", x.barBackgroundOption);

    });

我非常确定问题只是选择该值，因为当我检查页面上的元素时它具有正确的值 - 它只是没有显示它。

Answer 1

您在页面加载前调用代码。您没有将方法分配给onload，而是分配返回的内容。

window.onLoad = loadOptions();
                           ^^

需要

window.onLoad = loadOptions;

使用attr()设置值也很奇怪。你真的不应该使用.onload来设置加载onload的东西，这是不好的做法。由于您使用的是jQuery，请使用

$(window).on("load", loadOptions);

没有jQuery，你可以使用addEventListener()

使用Javascript选择颜色值

1 个答案: