Fatal编程技术网
  • javascript/
  • JavaScript动态地将元素附加到主体中，并向其添加EventListener

JavaScript动态地将元素附加到主体中，并向其添加EventListener

javascript html

JavaScript动态地将元素附加到主体中，并向其添加EventListener,javascript,html,Javascript,Html,首先，我是斯里兰卡人，我的英语不是很好 我已经使用javascript创建了变更主题系统。我想在每个页面中添加changethemicontrolpanel。所以我将其附加到DocumentonLoad事件中。所以这没关系，它工作得很好 在我添加了addEventListener之后。它不起作用。 因此，我希望将changethemicontrolpanel附加到body中，并将addEventListener添加到body中，而无需使用onclick选项。 如果不懂我的英语，请查看我的代码并帮

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

我已经使用javascript创建了变更主题系统。我想在每个页面中添加
changethemicontrolpanel
。所以我将其附加到DocumentonLoad事件中。所以这没关系，它工作得很好

在我添加了
addEventListener
之后。它不起作用。 因此，我希望将
changethemicontrolpanel
附加到body中，并将
addEventListener
添加到body中，而无需使用
onclick
选项。 如果不懂我的英语，请查看我的代码并帮助我。谢谢。

我只想附加它并向其添加click事件，而不需要
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");
}

<!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>

var changethemicontrolpanel=''；
函数将主题更改为（主题值）{
sessionStorage.removeItem（'THEME'）；//从会话存储中删除旧主题
如果（主题值=1）{
setItem（“主题”，“黑色”）；
}else if（主题值==0）{
setItem（“主题”，“光”）；
}
document.body.className=sessionStorage.getItem（“主题”）；
}
var主题=[“暗”、“亮”]；
主题。forEach（功能（项目）{
变量主题=document.querySelector（“.”+项）；
控制台日志（项目）；
如果（主题）{
theme.addEventListener（“单击”，函数（）{
如果（项目==“暗”）{
将主题更改为（1）；
}否则如果（项目==“灯”）{
将主题更改为（0）；
}
});
}
}，这个）；
window.onload=函数（）{
document.body.innerHTML+=changeThemeControlPanel；
document.body.className=sessionStorage.getItem（“主题”）；
}
这里有HTML代码

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

<!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>


.黑暗{
背景色：#191919；
颜色：#EEEEEE；
}
.光{
背景色：#EEEEEE；
颜色：#191919；
}
首先，我不确定这是否是你要求的。但根据我的理解，请阅读以下内容

themes.forEach
在
window.onload
之前执行，因此行
var-themes=document.querySelector（“.”+项）将为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，这样您的脚本就可以显示并访问元素。您正在尝试在元素存在之前获取该元素。希望您能理解。


<!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>


样本评估2

    


方格
生成
添加
去除

    


绿色
蓝色
红色

是的，我明白。现在它工作得很好。谢谢你的帮助。考虑在你的答案中添加一些上下文来解释为什么你的解决方案起作用。