如何使用Javascript更改HTML按钮onclick？

由 发布于

我正在尝试使用Java脚本更改HTML按钮的onclick函数。当前，当我尝试重新单击按钮（具有新功能）时，控制台将返回此错误：

index.js:25 Uncaught TypeError: document.getelementbyId is not a function
    at lightmode (index.js:25)
    at HTMLInputElement.onclick (index.html:1)

以下是index.html文件（HTML）的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Javascript</title>
    <link rel="stylesheet" type="text/css" href="main.css">
    <script type="text/javascript" src="index.js"></script>
</head>
<body id="mainbody">
    <header id="hdr">
        <h1>JAVASCRIPT</h1>
    </header>
    <input type="button" value="Dark Mode" onclick="darkmode();" id="modebutton"/>

</body>
</html>

这是index.js文件（Javascript）的代码：

function darkmode(){
    var hdr = document.getElementById("hdr");
    var body = document.getElementById("mainbody");
    var btn = document.getElementById("modebutton");
    body.style.background = "grey";
    hdr.style.background = "black";
    hdr.style.color = "white";
    btn.value = "Light Mode";
    btn.setAttribute("onClick", "javascript: lightmode();");
}

function lightmode(){
    var hdr = document.getElementById("hdr");
    var body = document.getElementById("mainbody");
    var btn = document.getelementbyId("modebutton");
    body.style.background = 'white';
    hdr.style.background = "grey";
    hdr.style.color = "black";
    btn.value = "Dark Mode";
    btn.setAttribute("onClick", "javascript: darkmode();");
}

如果有人需要我添加css文件，我会很乐意这样做。