如何使用按钮调用不同区域设置的不同字体？

#button1 {
  font-family: Arial, sans-serif;
}

#button2 {
  font-family: "Times New Roman", serif;
}

#button3 {
  font-family: "Courier New", monospace;
}

document.getElementById("button1").addEventListener("click", function() {
  document.getElementById("region1").style.fontFamily = "Arial, sans-serif";
});

document.getElementById("button2").addEventListener("click", function() {
  document.getElementById("region2").style.fontFamily = "Times New Roman, serif";
});

document.getElementById("button3").addEventListener("click", function() {
  document.getElementById("region3").style.fontFamily = "Courier New, monospace";
});

<div id="region1">
  这是区域1的文本。
</div>

<div id="region2">
  这是区域2的文本。
</div>

<div id="region3">
  这是区域3的文本。
</div>