向第一个按钮添加一个事件侦听器，将 <h1> 中的文本更改为大写或全部小写

Question

你好，代码朋友们，我有一个作业，这是新的

向第一个按钮添加一个事件侦听器，根据当前状态将 中的文本更改为全大写或全小写。

我需要单击按钮将 h1 下的所有段落更改为小写或大写。

在 HTML 中 我给p做了一个id。

我做了一个带有 id 的按钮

JS 我使用 getElementById 来带上我的按钮和段落。

const textChange = document.getElementById("btnChange1"); console.log(textChange);

const txtChange = document.getElementById("myP");

textChange.addEventListener("点击", () => {

} });

这是我所能得到的，提前谢谢！

Answer 1

首先，您需要一个变量 isUpperCase，它会记住文本是大写还是小写。该变量将随着每次单击按钮而改变，因此不能将其声明为常量。

在此之后，您只需要在事件监听器中添加一个简单的 if else 语句即可。此 if else 语句将检查 isUpperCase 的值，然后根据其状态将文本更改为大写或小写：

const textButton = document.getElementById("textButton");
const myP = document.getElementById("myP");
let isUpperCase = false;

textButton.addEventListener("click", function() {
    if (isUpperCase) {
        myP.textContent = myP.textContent.toLowerCase();
        isUpperCase = false;
    } else {
        myP.textContent = myP.textContent.toUppperCase();
        isUpperCase = true;
    }
 });