This seems not to be a valid function. Why?

Question

Both Brackets and Firefox call this a non-valid function. I'm a beginner. Can somebody tell my why? It's just about the js.

I want that if you hover over "timer" and click "jaar", the button that says "timer" now says "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

Use document instead of HTMLDocument.

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

Better yet, if you're only inserting text, use textContent, it's more reliable and more appropriate:

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

Answer 2

I solved the problem by using a script tag I found at W3schools.com:

<script>
document.getElementById("demo").onclick = function() {myFunction()};

function myFunction() {
    document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
</script>

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick_dom

thanks to all of the people who tried solving it.