当javascript中的变量更改时更新div内容_Javascript_Variables_Updates

当javascript中的变量更改时更新div内容

javascript variables

当javascript中的变量更改时更新div内容,javascript,variables,updates,Javascript,Variables,Updates,我到处找了，但找不到确切的我需要的东西。我希望div（包含一个变量值）在每次变量更改时更新。这可能吗？无需重新加载整个页面，因为这将重置变量值 <head> <script> var eg=30</script> </head> <body> <div> 30 </div> <button onclick=eg++>increase</button> </body> va

我到处找了，但找不到确切的我需要的东西。我希望div（包含一个变量值）在每次变量更改时更新。这可能吗？无需重新加载整个页面，因为这将重置变量值

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

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


var eg=30
30
增加

然后如何使包含数字的div更新

更新后必须将变量写入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>


var eg=30
30
增加

将此添加到onclick事件中


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

var eg=30
30
增加

首先创建一个函数，该函数既增加计数器，又更新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>


30
增加
var eg=30
//增加计数器的功能
函数递增eg（）{
eg++；
document.getElementById（'egDiv'）。innerHTML=eg；
}
//添加onclick处理程序，最简单的方法是：
document.getElementById（'egButton'）。onclick=increaseEg；

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