如何用纯JavaScript切换两个span文本？切换功能失效求助

云原生阿岚

2026-7-19

解决两个span切换显示和文本内容的问题

你的代码核心问题有两个：

只修改了存储display状态的变量值，但没把这些值写回元素的style.display属性，所以元素的显示状态根本不会变化
变量cdisp和erdisp没有用let/const声明，会变成全局变量，容易引发意外问题

以下是修正后的完整代码：

HTML

<span id="fcol" style="display: block; font-size:24px; color: green;">Only letters please</span> 
<span id="ferr" style="display: none; font-size:24px; color: red;">Only letters please 2</span>
<button onClick="tog()">Sub</button>

<div id="pr"></div>

CSS

body {
  text-align: center;
}

JavaScript

function tog() {
  let fc = document.getElementById("fcol");
  let fe = document.getElementById("ferr");
  let pr = document.getElementById("pr");
  
  // 声明变量，避免全局污染
  let cdisp = fc.style.display;
  let erdisp = fe.style.display;
  
  if (erdisp !== "block") {
    cdisp = "none";
    erdisp = "block";   
    pr.innerHTML = fe.textContent;
    // 把新的display值赋值给元素，生效显示状态
    fc.style.display = cdisp;
    fe.style.display = erdisp;
  } else {
    erdisp = "none";                                                                                                            
    cdisp = "block";
    pr.innerHTML = fc.textContent;
    // 同样赋值回元素
    fc.style.display = cdisp;
    fe.style.display = erdisp;
  }
}