如何实现点击一个按钮修改另一个按钮的文本内容？

要完成这个功能，只需两步：完善修改文本的函数，给触发按钮绑定点击事件。

完整代码示例 #

<button id="button_1_id">Cat</button>

<br><br><br><br>

<button id="chnage_text_button" onclick="change_text()">修改上方按钮的文本</button>

<script>
function change_text(){
  // 获取目标按钮并修改文本
  const targetBtn = document.getElementById('button_1_id');
  targetBtn.textContent = 'Dog';
}
</script>

关键说明 #

• document.getElementById('button_1_id')：通过按钮的唯一ID定位到要修改的按钮元素
• textContent：用于设置元素的文本内容，是修改文本的标准方式，兼容性好且性能稳定
• 在触发按钮上添加onclick="change_text()"：点击该按钮时自动调用修改文本的函数

另外注意：你的触发按钮ID拼写有误（chnage_text_button应为change_text_button），如果需要规范命名可以修正，但不影响功能使用。

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