使用 switch 语句更改 HTML 元素的文本内容的问题答案

【问题标题】：Problem changing text content of HTML element using switch statement使用 switch 语句更改 HTML 元素的文本内容的问题
【发布时间】：2021-04-05 03:04:56
【问题描述】：

我想完全理解和学习 JS Switch 语句，所以我想了一个练习——根据当前存在的标题文本来更改 HTML 标题。

这是 JS 代码：

var zz = document.getElementById("title").textContent;

switch(zz) {

    case "Homepage":
        console.log(document.getElementById("title").textContent);
        document.getElementById("title").textContent = "Case 1";
        console.log(document.getElementById("title").textContent + "(HAS CHANGED)")
        break;

    case "Homepage2":
        console.log(document.getElementById("title").textContent);
        document.getElementById("title").textContent = "Case 2";
        console.log(document.getElementById("title").textContent + "(HAS CHANGED)")
        break;

    default:
        console.log(document.getElementById("title").textContent);
        document.getElementById("title").textContent = "Default case";
        console.log(document.getElementById("title").textContent + "(HAS CHANGED)")
        break;
}

HTML：

<title id="title"> Homepage </title>

问题是它总是执行“默认”案例，即使标题适合呈现的案例。我相信问题出在var zz = document.getElementById("title").textContent; 之内，因为如果我声明它的文本内容 - 它可以工作（我不想这样做，因为它只是覆盖了 HTML 中的现有标题）。是否可以使用 switch 语句来实现这一点？ P.S 我不想使用 if/else - 我想用 switch 来做。谢谢

【问题讨论】：

也许问题是由于文本周围有多余的空格 - 例如，`主页`而不是Homepage？

标签： javascript html switch-statement

【解决方案1】：

目前，您正在将 ' Homepage ' 与 'Homepage' 进行比较，这是一个不同的字符串，因为有空格。

解决方案是在第一行的末尾添加 trim()，如下所示：

var zz = document.getElementById("title").textContent.trim();

trim(): 删除字符串两边的空格

【讨论】：

【解决方案2】：

var zz = document.getElementById("title").html().trim();

【讨论】：

【解决方案3】：

你可以.innerHTML函数：

var zz = document.getElementById("title").textContent;

switch(zz) {

    case "Homepage":
        document.getElementById("title").innerHTML = "<title id="title"> Case 1 </title>";
        break;

    case "Homepage2":
        document.getElementById("title").textContent = "<title id="title"> Case 2  </title>";
        break;

    default:
        document.getElementById("title").textContent = "<title id="title"> Default case </title>";
        break;
}

【讨论】：