JS修改page变量后前端页码未同步更新显示问题求助

问题原因 #

• 页面初始化时执行的document.getElementById('page').innerHTML = "Current page: " + page + " | Enter page number: ";代码只会运行一次，仅在页面加载时把初始值0渲染到DOM上
• JS不存在变量和DOM的自动绑定机制，后续修改page变量的值时，你没有主动触发DOM更新操作，所以页面上的页码不会跟着变化

修复方案 #

可以封装一个单独的更新页码的函数，每次修改page变量后调用这个函数同步DOM内容，示例代码如下：

var page = 0;
// 封装更新页码的公共函数
function updatePageDom() {
  document.getElementById('page').innerHTML = "Current page: " + page + " | Enter page number: ";
}
// 页面初始化调用一次
updatePageDom();

function f1() {
  document.getElementById('contents').innerHTML = "<p>You are a pet hamster. You are waiting for your owner to come home. What do you want to do in the meantime?</p></br><button type='button' onclick='f2()'>Run in the wheel</button> <button type='button' onclick='f3()'>Eat</button>";
  page = 1;
  // 修改page后调用更新函数
  updatePageDom();
}
// 后续f2、f3等切换页面的函数，修改page后都调用一次updatePageDom即可

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