为什么我的按钮会消失？ （试图理解基础知识）

Question

我必须注意到我编写代码还不错。我一直在尝试编写一些代码来学习基础知识。无论如何，我遇到的问题是，只要我调用它的功能（点击它），下面代码中的按钮就会消失。有什么方法可以改变这个，这样我可以继续按下按钮并在数字上加1吗？

如果有人可以帮助我，我会非常感激。

<title>testingstuff</title>
<script type = "text/javascript">

var givenNumber = parseFloat(prompt("Give a number to start with"))
document.write (givenNumber)

function addingFunc()
{
    document.write(givenNumber+1)
};

<button onclick=addingFunc();>Click here for +1</button>

Answer 1

在文档加载完成后调用整个文档时，

document.write会覆盖整个文档，您可以使用innerHTML或任何其他将内容附加到DOM的方法：

function addingFunc() {
    document.getElementById('element_to_write_to').innerHTML = ++givenNumber;
};

FIDDLE

Answer 2

问题在于使用：

document.write

每当你这样做时它会覆盖页面中的所有html。 在页面中添加div，如下所示：

<div id="msg"></div>

然后使用它：

document.getElementById("msg").innerHTML = givenNumber+1;

Answer 3

您正在寻找

document.getElementById('outputDiv').innerHTML = givenNumber+1;