使用 switch 语句更改 HTML 元素的文本内容时出现问题

Question

我想完全理解和学习 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 来做。谢谢

Answer 1

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

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

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

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

Answer 2

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

Answer 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;
}

使用 switch 语句更改 HTML 元素的文本内容时出现问题

Problem changing text content of HTML element using switch statement

html

javascript

switch-statement