Question

首先，我是斯里兰卡，我的英语不是很好。

我使用javascript创建了更改主题系统。我想在每个页面添加changeThemeControlPanel。所以我将它附加在文档onload事件上。所以它的工作并不重要。

我添加addEventListener之后。它没有用。因此，我希望将changeThemeControlPanel添加到正文并在不使用addEventListener选项的情况下向其添加onclick。 如果我不懂英语，请查看我的代码并帮助我。感谢。

我只想附加它并在没有onclick
的情况下添加点击事件

我的JavaScript就在这里

var changeThemeControlPanel = '<div id="change-theme"><a href="javascript:;" class="dark">DARK</a><a href="javascript:;" class="light">LIGHT</a></div>';

function changeThemeTo(theme_value) {
    sessionStorage.removeItem('THEME'); // remove old theme from session storage
    if (theme_value == 1) {
        sessionStorage.setItem("THEME", 'dark');
    } else if (theme_value == 0) {
        sessionStorage.setItem("THEME", 'light');
    }
    document.body.className = sessionStorage.getItem("THEME");
}

var themes = ['dark', 'light'];

themes.forEach(function (item) {
    var theme = document.querySelector("." + item);
    console.log(item);

    if (theme) {
        theme.addEventListener("click", function () {
            if (item == "dark") {
                changeThemeTo(1);
            } else if (item == "light") {
                changeThemeTo(0);
            }
        });
    }

}, this);

window.onload = function () {
    document.body.innerHTML += changeThemeControlPanel;
    document.body.className = sessionStorage.getItem("THEME");
}

HTML代码在这里

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .dark {
        background-color: #191919;
        color: #EEEEEE;
    }
    .light {
        background-color: #EEEEEE;
        color: #191919;
    }
    </style>
</head>
<body>

</body>
</html>

Answer 1

首先，我不确定这是否是你所要求的。但根据我的理解，请阅读以下内容

themes.forEach在window.onload之前执行，因此行var theme = document.querySelector("." + item);将为null或未定义。我希望你明白。

要使代码正常工作，请尝试

window.onload = function () {
    document.body.innerHTML += changeThemeControlPanel;
    var themes = ['dark', 'light'];

themes.forEach(function (item) {
    var theme = document.querySelector("." + item);
    console.log(item);

    if (theme) {
        theme.addEventListener("click", function () {
            if (item == "dark") {
                changeThemeTo(1);
            } else if (item == "light") {
                changeThemeTo(0);
            }
        });
    }

}, this);
    document.body.className = sessionStorage.getItem("THEME");
}

在上面的代码中，首先我们将div附加到body，然后运行querySelector，以便元素存在并可由脚本访问。您试图在该元素存在之前获取元素。我希望你能理解。

Answer 2

<!DOCTYPE html>
<html>
<head>
    <title>Sample Assesment 2</title>
    <link   rel="stylesheet" type="text/css" href="Assets\css\style.css">
    <script type="text/javascript" src="Assets\lib\jQuery.js"></script>
    <script type="text/javascript" src="Assets\lib\bootstrap.min.js"></script>
</head>
<body>

    <div class="container">


        <!-- <button >Add </button>
        <button>Remove</button>
        <button>Add</button>
        <button>Remove</button>
        <button>Red</button>
        <button>Green</button>
        <button>Blue</button> -->



        <ul>

        </ul>
        <center>
        <div id="randomBackground" class="square">squares</div>
        <button id="Genrtecolors" class="genBtn">Generate</button>
        </center>


        <div>

                <button id="addBttn" class="addBtn" >Add </button>
                <button id="RemoveBttn" class="RemovBtn" >Remove</button>


                <ul id="ULlist">

                </ul>

                <button class="button button1">Green</button>
                <button class="button button2">Blue</button>
                <button class="button button3">Red</button>

        </div>

</div>

<script type="text/javascript" src="Assets\js\script.js"></script>
</body>
</html>

JavaScript动态地将元素附加到body，并将addEventListener附加到它

2 个答案: