Question

Brackets和Firefox都认为这是一个无效的功能。我是初学者。有人可以告诉我为什么吗？它只是关于js。

如果你将鼠标悬停在＆＃34;计时器＆＃34;然后点击＆＃34; jaar＆＃34;，按钮，显示＆＃34;计时器＆＃34;现在说＆＃34; 1 jaar＆＃34;。

（stackoverflow希望我写更多内容以补偿我在问题中添加了多少代码，但我不知道该写什么。代码是必要的.css就在那里，以便你看起来如何它在我看来。）

＆＃13;

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

＆＃13;

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
}

＆＃13;

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

＆＃13;

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

我使用在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

感谢所有试图解决它的人。

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

2 个答案: