JavaScript中如何让函数内修改的变量同步更新到页面元素？

你的代码里，document.getElementById("demo2").innerHTML = y;只在页面刚加载时执行了一次，此时y的初始值是0。当你点击按钮修改y的值后，并没有重新更新demo2的内容，所以它一直显示0。

解决方法一：在每个按钮函数中同步更新demo2 #

直接在每个点击函数里添加更新demo2的代码，确保每次修改y后同步刷新页面元素：

<!DOCTYPE html>
<html>

<body>
  <button onclick="alternative1()">5</button>
  <button onclick="alternative2()">10</button>
  <button onclick="alternative3()">15</button>
  
  <p id="demo"></p>
  <p id="demo2"></p>

  <script>
    var x = 0;
    var y = 0;

    function alternative1() {
      y = x + 5;
      document.getElementById("demo").innerHTML = "You have chosen " + y;
      document.getElementById("demo2").innerHTML = y;
    } 

    function alternative2() {
      y = x + 10;
      document.getElementById("demo").innerHTML = "You have chosen "+ y;
      document.getElementById("demo2").innerHTML = y;
    }

    function alternative3() {
      y = x + 15;
      document.getElementById("demo").innerHTML = "You have chosen "+ y;
      document.getElementById("demo2").innerHTML = y;
    }

    document.getElementById("demo2").innerHTML = y;
  </script>
</body>
</html>

解决方法二：重构代码减少重复逻辑 #

把重复的更新逻辑抽成一个通用函数，通过参数传递数值，让代码更简洁易维护：

<!DOCTYPE html>
<html>

<body>
  <button onclick="updateValue(5)">5</button>
  <button onclick="updateValue(10)">10</button>
  <button onclick="updateValue(15)">15</button>
  
  <p id="demo"></p>
  <p id="demo2"></p>

  <script>
    var x = 0;
    var y = 0;

    function updateValue(num) {
      y = x + num;
      document.getElementById("demo").innerHTML = "You have chosen " + y;
      document.getElementById("demo2").innerHTML = y;
    }

    document.getElementById("demo2").innerHTML = y;
  </script>
</body>
</html>

两种方法都能让demo2实时显示y的最新值，每次点击按钮时，都会同步更新两个p元素的内容。

内容的提问来源于stack exchange，提问作者Sebbe