如何将JavaScript中innerHTML赋值代码简化为print = `文本`形式？

你可以通过定义全局setter来实现想要的简化写法，具体代码如下：

// 先确保获取到目标元素，注意要在DOM加载完成后执行这段代码
const show = document.getElementById('htReadOut');

// 给window对象定义print属性的setter
Object.defineProperty(window, 'print', {
  set(value) {
    show.innerHTML = value;
  }
});

之后你就可以直接用print = 'some text';来更新屏幕内容了。

你之前遇到的问题原因： #

• 用函数/对象时出现ID未定义：大概率是脚本执行时机不对，比如在DOM还没加载完的时候就调用了getElementById，导致拿到的是null。解决办法是把脚本放在HTML的</body>标签前，或者用DOMContentLoaded事件包裹代码：

  document.addEventListener('DOMContentLoaded', () => {
    // 这里放获取元素和定义setter的代码
  });
  

• 把print设为show.innerHTML的常量报错：一方面window.print是浏览器自带的打印函数，直接声明const print会和全局的print冲突；另一方面，const print = show.innerHTML只是把当时innerHTML的字符串值存到print里，后续修改print根本不会影响元素的innerHTML——因为字符串是值类型，不是引用。

注意事项 #

覆盖window.print会替换浏览器自带的打印功能，如果之后还需要用系统打印，建议换个名字，比如screenPrint或者logText，避免冲突。

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