如何实现按钮文本切换？addEventListener与onclick方案该选哪个？

两种方式都能实现你的需求，但更推荐用addEventListener——这是现代前端更常用的事件绑定方式，先给你改好代码，再讲两者的区别：

用addEventListener实现（推荐） #

在你现有代码基础上，只需在点击回调里加一行文本切换逻辑即可：

const btn = document.getElementById("click_contact")
const form = document.getElementById("message_form")

btn.addEventListener('click', () => {
  form.classList.toggle('open')
  // 根据当前文本切换按钮内容
  btn.textContent = btn.textContent === 'open contact' ? 'close contact' : 'open contact'
})

HTML保持你原有的结构就行：

<div class="cta_btn_contact">
  <button id="click_contact" class="btn3 cta-btn3">open contact</button>
</div>

用onclick实现的写法 #

如果一定要用onclick，代码结构会是这样：
先修改HTML，把事件绑定写在按钮属性里：

<div class="cta_btn_contact">
  <button id="click_contact" class="btn3 cta-btn3" onclick="toggleContact()">open contact</button>
</div>

再写对应的JS函数：

function toggleContact() {
  const form = document.getElementById("message_form")
  const btn = document.getElementById("click_contact")
  form.classList.toggle('open')
  btn.textContent = btn.textContent === 'open contact' ? 'close contact' : 'open contact'
}

两种方式的核心区别 #

• addEventListener：支持给同一个元素绑定多个同类型事件，不会互相覆盖；事件逻辑和DOM结构分离，代码更易维护；还能控制事件在捕获/冒泡阶段触发，灵活性更高。
• onclick：属于旧的DOM0级事件绑定，一个元素只能绑定一个click事件，新绑定会直接覆盖旧的；逻辑写在HTML标签里，耦合度高，大型项目中难以维护；没有事件阶段控制的能力。

综上，优先选addEventListener，在你现有代码上改动最小，也更符合前端开发规范。

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