Question

我在HTML文件中有类似的内容：

<html>

    <body>

    <script type = text/javascript">
        var value = 0;

        add(x){
            x++;
            document.write(x);
        }
    </script>

    <form>
        <input type = "button" value = "Add one" onClick = "add(value)" >
    </form>

    <body> 

</html>

当我运行它并单击按钮时，页面将只更新并仅显示新值。如何更改它以便它只是实时更新，并且“添加一个”按钮仍保留在屏幕上？

我认为我需要像“字段”这样的东西来显示价值，然后才能获得该字段ID，但我不确定这是否是正确的思考方式。

Answer 1

只需使用span：

<form>
    <input type="button" value="Add one" onclick="add();"/>
</form>
<span id="field">0</span>

然后，使用document.getElementById()和innerHTML进行更新：

var value = 0;

function add() {
    value++;
    document.getElementById("field").innerHTML = value;
}

var value = 0;

function add() {
    value++;
    document.getElementById("field").innerHTML = value;
}

<form>
    <input type="button" value="Add one" onclick="add();"/>
</form>
<span id="field">0</span>

Answer 2

在你的html中添加div中的id，例如 addOne

<html>

    <body>

    <script type = text/javascript">
        var x = 0;

function increment(value){
    document.getElementById('addOne').innerHTML = ++x;
}
    </script>

    <form>
        <input type = "button" onClick = "increment(value)" >
    </form>
<div id ="addOne"></div>

    <body> 

</html>

用于递增/递减屏幕上的值的按钮

2 个答案: