javascript - 这似乎不是一个有效的功能。为什么？

Question

Brackets 和 Firefox 都将其称为无效函数。我是初学者。有人可以告诉我为什么吗？这只是关于 js。

我希望如果您将鼠标悬停在“计时器”上并单击“jaar”，则显示“计时器”的按钮现在会显示“1 jaar”。

function maand() {
    HTMLDocument.getElementById("timer").innerHTML = "Hello JavaScript!";
}

html {
    padding: 0;
    margin: 0;
    font-family: 'tahoma';
    font-size: 14px;
}

body {
    padding: 0;
    margin: 0;
    background-color: #f3f3ed;
}
.messages_compose {
    padding: 10px;
    margin-bottom: auto;
}
.messages_textarea_container {
    display: inline-block;
    width: 400px;
    margin-left: 10px;
}
.messages_textarea {
    border: 3px solid lightgray;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 5px;
    width: 400px;
    height: 40px;
    resize: none;
    float:left;
    border-radius:2px;
    position:absolute;
}
.button {
    border: none;
    font-size: 12px;
    padding: 12px 12px;
    height: 40px
    text-align: center;
}
.green_button {
    background-color: #027fed;
    color: white;
    border-radius: 2px;
    cursor: pointer;
    float:right;
    position:relative;
    margin-right: -54px;
}
.green_button:active {
    background-color: #eee;
    color: black;
}
.keuze {
    position:absolute;
    width:100px;
    height:100px;
    float:left
}
#timer {
    color:black;
    background:#eee;
    border:none;
    padding-left: 10px;
    font-size:12px;
    border-radius: 2px;
    float:left;
    padding: 12px 12px;
    cursor:pointer;
    list-style-type: none;
    position:Relative;
    margin-left:414px;
    margin-top: -14px;
    width:60px
}
#timer:hover {
    color:white;
    background:#027fed;
}
li {
    background-color:#eee;
    font-size:inherit;
    width:150px;
    position:relative;
    float:left;
    bottom:31px;
    left:0;
    display: block;
    font-size: 12px;
    text-decoration: none;
    font-family: tahoma;
    color: black;
    width: 50px;
    height: auto;
    border: 1px solid #;
    border-width: 1px 1px 0 0;
    background: #eee;
    background-color: rgb(238, 238, 238);
    padding-left: 10px;
    line-height: 38px;
    border-radius: 2px;
    height: auto;
    line-height: 1em;
    padding: 5px 10px;
    width: 129px;
    margin-bottom:1px;
    margin-left:431px;
}
li:hover{
    cursor:pointer;
    background-color:#027fed;
    color:white
}
.list {
    display:none;
    list-style-type: none;
    position:absolute !important;
}
.keuze:hover .list {
    display:block
}

<div class="messages_textarea_container">
                        <textarea class="messages_textarea"></textarea>
                        <button class="button green_button">Stuur</button>
                            <ul class="keuze">
                                <button id="timer">1 Jaar</button>
                                <div class="list"><li>jaar</li>
                                <li id="jaar" id="maand" onclick="maand()">maand</li>
                                <li id="week">week</li>
                                <li id="dag">dag</li>
                                <li id="uur">uur</li></div>
                            </ul>
                        </div>

Answer 1

使用 document 而不是 HTMLDocument。

document.getElementById("timer").innerHTML = "Hello JavaScript!";

更好的是，如果您只是插入文本，请使用 textContent，它更可靠也更合适:

document.getElementById("timer").textContent = "Hello JavaScript!";