如何实现点击按钮切换触发JavaScript的open/close函数？

首先咱们先拆解下你现有代码里的几个核心问题，这也是功能不正常的根源：

• HTML按钮的onclick写法错误：应该是onclick="open()"，你少了括号，导致函数根本不会被执行
• document.getElementsByTagName("p")返回的是元素集合（HTMLCollection），不是单个元素，直接调用.style会报错，必须取集合里的第一个元素，比如document.getElementsByTagName("p")[0]
• 缺少状态切换逻辑：按钮当前只能固定触发open()，没有自动切换到close()的机制

下面给你两种贴合需求的解决方案，你可以根据喜好选择：

方案一：用单个切换函数实现（推荐） #

不需要来回修改按钮的onclick属性，直接通过判断元素当前的显示状态自动切换，代码更简洁易维护：

<style>
p{ display:none; }
</style>

<button onclick="toggleParagraph()">Hi</button> 
<p>school</p>

<script>
function toggleParagraph() {
  // 获取目标p元素（取集合第一个）
  const pTag = document.getElementsByTagName("p")[0];
  // 判断当前显示状态并切换
  if (pTag.style.display === "block" || pTag.style.display === "") {
    // 初始状态下style.display为空（因为display:none写在CSS里，不是行内样式），所以第一次点击会进入这里切换为显示
    pTag.style.display = "none";
  } else {
    pTag.style.display = "block";
  }
}
</script>

方案二：手动切换按钮的onclick事件（贴合你的原始需求） #

如果你一定要实现「点击后修改按钮的onclick为close()，再次点击切回open()」的逻辑，可以这样写：

<style>
p{ display:none; }
</style>

<button id="toggleBtn" onclick="openParagraph()">Hi</button> 
<p id="targetP">school</p>

<script>
// 提前获取元素，避免每次调用函数都重新查询
const pTag = document.getElementById("targetP");
const btn = document.getElementById("toggleBtn");

function openParagraph() {
  pTag.style.display = "block";
  // 将按钮点击事件替换为关闭函数
  btn.onclick = closeParagraph;
}

function closeParagraph() {
  pTag.style.display = "none";
  // 将按钮点击事件替换为打开函数
  btn.onclick = openParagraph;
}
</script>

小提醒：open和close是浏览器的内置函数（比如window.open），虽然不一定会冲突，但建议不要用这类名称作为自定义函数名，避免潜在问题，所以我改成了openParagraph和closeParagraph~

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