Question

我已经四处寻找，但无法找到我需要的东西。我希望包含变量值的div每次变量更新时都会更新。这可能吗？无需重新加载整个页面，因为这会重置变量值。

<head>
<script> var eg=30</script>
</head>
<body>
<div> 30 </div>

<button onclick=eg++>increase</button>
</body>

然后我如何制作包含数字更新的div

Answer 1

您必须在更新后将变量写入div。

 <head>
 <script> var eg=30</script>
 </head>
 <body>
 <div id="mydiv"> 30 </div>
 <button onclick='eg++; document.getElementById("mydiv").innerHTML = eg;'>increase</button>
 </body>

Answer 2

document.getElementsByTagName('div')[0].innerHTML = your_var;

在onclick事件

上添加此项

Answer 3

<head>
<script> var eg=30</script>
</head>
<body>
<div id="display"> 30 </div>
<button onclick="eg++;document.getElementById('display').innerHTML = eg;">Increase</button>

Answer 4

首先创建一个既增加计数器又更新div的函数。然后，从onclick调用该函数。如果您将脚本放在按钮上，则可以轻松地从HTML中删除所有内联脚本，这样可以使其更有条理，更易于阅读：

<body>
    <div id="egDiv"> 30 </div>
    <button id="egButton">increase</button>

    <script> 
    var eg=30

    // Function to increase the counter
    function increaseEg() {
        eg++;
        document.getElementById('egDiv').innerHTML = eg;
    }

    // Add onclick handler, the simplest way:
    document.getElementById('egButton').onclick = increaseEg;
    </script>
</body>

当javascript中的变量发生变化时，div内容会更新

4 个答案: