点击另一元素时如何切换HTML元素样式并使用toggle实现文本切换

核心修改点 #

• 修复点击事件传参错误：原代码绑定点击事件时传入的checkboxInput、labelId、headingId都是未声明的变量，运行会报错，改为直接传入对应元素的ID字符串即可
• 补充标签文本切换逻辑：根据复选框的选中状态，动态修改label的文本内容
• 优化函数内DOM获取逻辑：直接使用函数入参的ID值获取元素，不需要硬编码写死ID，提升复用性

修改后完整代码 #

JavaScript代码 #

let myContainer = document.getElementById("myContainer");

function onTextAndColorChange(checkboxId, labelId, headingId) {
    let checkboxElement = document.getElementById(checkboxId);
    let labelElement = document.getElementById(labelId);
    let headingElement = document.getElementById(headingId);
    
    // 切换标题样式
    headingElement.classList.toggle("checked");
    // 切换标签文本
    labelElement.textContent = checkboxElement.checked ? "Uncolor the heading element" : "Color the heading element";
}

let inputElement = document.createElement("input");
inputElement.type = "checkbox";
inputElement.id = "checkboxInput";
inputElement.onclick = function() {
    // 传入对应元素的ID字符串
    onTextAndColorChange("checkboxInput", "labelId", "headingId");
};
myContainer.appendChild(inputElement);

let labelElement = document.createElement("label");
labelElement.setAttribute("for", "checkboxInput");
labelElement.textContent = "Color the heading element";
labelElement.id = "labelId";
myContainer.appendChild(labelElement);

let headingElement = document.createElement("h1");
headingElement.textContent = "heading Element";
headingElement.classList.add("heading");
headingElement.id = "headingId";
myContainer.appendChild(headingElement);

CSS代码（无需修改，沿用原有代码即可） #

@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap");

.checked {
    color: #7a0ecc;
    background-color: #f2ebfe;
}

HTML代码（无需修改，沿用原有代码即可） #

<!DOCTYPE html>
<html>

<head></head>

<body>
    <div id="myContainer"></div>
</body>

</html>

实现效果 #

内容的提问来源于stack exchange，提问作者Hari nadh babu