求助：如何为按钮添加事件监听器实现H1下段落文本大小写切换

核心逻辑说明 #

要实现点击按钮切换<h1>下段落的全大写/全小写，关键是判断当前文本的大小写状态，然后执行对应的转换：

• 如果当前文本是全大写，切换为全小写
• 否则，切换为全大写

单段落场景（对应你已设置的myP ID） #

假设你的HTML结构如下：

<h1>作业标题</h1>
<p id="myP">Hello, I'm a beginner programmer!</p>
<button id="btnChange1">切换大小写</button>

对应的JavaScript代码：

// 获取按钮和段落元素
const btnChange1 = document.getElementById('btnChange1');
const myP = document.getElementById('myP');

// 添加点击事件监听器
btnChange1.addEventListener('click', () => {
  // 获取当前段落文本
  const currentText = myP.textContent;
  // 判断当前是否为全大写：对比文本与它的全大写形式是否一致
  const isAllUpperCase = currentText === currentText.toUpperCase();
  
  // 执行切换
  if (isAllUpperCase) {
    myP.textContent = currentText.toLowerCase();
  } else {
    myP.textContent = currentText.toUpperCase();
  }
});

多段落场景（如果<h1>下有多个段落） #

如果需要切换<h1>下所有段落的大小写，调整代码如下：

<h1>作业标题</h1>
<div>
  <p>第一段测试文本</p>
  <p>第二段测试文本</p>
</div>
<button id="btnChange1">切换所有段落大小写</button>

JavaScript代码：

const btnChange1 = document.getElementById('btnChange1');
// 获取<h1>后面的所有段落元素（根据你的实际HTML结构调整选择器）
const allParagraphs = document.querySelectorAll('h1 ~ p');

btnChange1.addEventListener('click', () => {
  // 遍历每个段落执行切换逻辑
  allParagraphs.forEach(paragraph => {
    const currentText = paragraph.textContent;
    const isAllUpperCase = currentText === currentText.toUpperCase();
    paragraph.textContent = isAllUpperCase ? currentText.toLowerCase() : currentText.toUpperCase();
  });
});

关键知识点解释 #

• textContent：获取元素的纯文本内容，相比innerText更稳定，不会受样式影响
• toUpperCase() / toLowerCase()：字符串内置方法，分别将文本转换为全大写/全小写
• querySelectorAll()：可以通过CSS选择器批量获取多个元素，适合处理多段落场景

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