setTimeout 不显示文本答案

【问题标题】：setTimeout is not showing textsetTimeout 不显示文本
【发布时间】：2019-03-27 20:18:09
【问题描述】：

所以我尝试做一个弹出窗口，它应该像这样工作： 3 秒后，它会显示关闭按钮，但当您等待 3 秒时，将会有倒计时。我的问题是没有显示文字

var n = 3;

function popup() {
  set.setTimeout(function() {
    getElementById('bro').style.visibility = visible;
  }, 3000);
  
  while (n > 0) {
    set.setTimeout(function() {
      n--;
    }, 1000);
    n.toString()
    getElementById('texto').innerHTML = n;
  }
}

function bro() {
  getElementById('bro').style.display = "none";
  getElementById('texto').style.display = "none";
  getElementsByName('block').style.display = "none";
}

#bro {
  position: absolute;
  left: 50px;
  top: 150px;
  visibility: hidden;
  justify-content: center;
  z-index: 3;
  font-size: 20px;
}

#texto {
  position: absolute;
  justify-content: center;
  transition: none;
  background-color: inherit;
  padding: inherit;
  z-index: 1;
}

aside {
  position: absolute;
  justify-content: center;
  width: 600px;
  height: 500px;
  background-color: blue;
  border-radius: 30px;
  z-index: 2;
}

<body onload="popup()">
  <p id="texto" color="red">3</p>
  <button id="bro" onclick="bro()">close</button>
  <aside name="block"></aside>
</body>

【问题讨论】：

我认为你需要 document.getElementById 而不仅仅是 getElementById
还有一个与元素同名的全局函数会导致问题。
什么是set？除非它是对 window 对象的引用（它本身会非常奇怪），否则您的 setTimeout() 调用将导致语法错误。
您希望超时内的 n-- 更改您在超时外调用它的文本？？？它不是那样工作的。对变量的引用不会更新 innerHTML ..... 同样没有意义为什么你会有一个 while 循环并运行 setTimeout。看起来您将锁定浏览器。
我建议您在尝试之前多看一些 js 教程，如上所述，set.setTimeout() 是什么？此外，您根本没有引用 dom， document.querySelector('#textto'); document.querySelector('#bro') document.querySelector('.block') 并且您将可见性与显示混为一谈。我会说从顶部开始

标签： javascript jquery html dom

【解决方案1】：

您正在混合可见性和显示。您的超时功能将可见性设置为可见，但显示值仍设置为无。将所有显示“无”更改为“隐藏”可见性。

【讨论】：

【解决方案2】：

我正在用我的手机打字，我没有一个工具可以轻松编写完整的代码，但是看看你的代码中的这个错误：

您必须在代码中的任何 getElementById 之前添加 document.。
您必须将visible 包裹在“”之间：document.getElementById('bro').style.visibility = "visible";
什么是set（在set.setTimeout）？从setTimeout() 之前删除它。
n.toString() 是什么？你必须分配它，不要直接使用它：.innerHTML=n.toString()
将while 放入setInterval()
您在popup 函数中使用了visibility，在另一个地方使用了display（用于更改bro 的可见性）。在您的代码中使用其中之一（css 和 js 和 html）；
使用document.querySelector('[name="block"]').style.display = "none"; 隐藏block 元素。 8- 将 z-index 的 #texto 更改为 3。

更新部分：

现在，您可以在此处测试结果。 这是您的代码本身，它的问题已经解决：

#bro {
  position: absolute;
  left: 50px;
  top: 150px;
  visibility: hidden;
  justify-content: center;
  z-index: 3;
  font-size: 20px;
}

#texto {
  position: absolute;
  justify-content: center;
  transition: none;
  background-color: inherit;
  padding: inherit;
  z-index: 3;
  font-size: 20pt;
}

aside {
  position: absolute;
  justify-content: center;
  width: 600px;
  height: 500px;
  background-color: blue;
  border-radius: 30px;
  z-index: 2;
}

 <body onload='popup()'>
  <p id="texto" color="red">3</p>
  <button id="bro" onclick="bro()">close</button>
  <aside name="block"></aside>
  <script>
    var n = 3;
    function popup() {
      setTimeout(function() {
        document.getElementById('bro').style.visibility="visible";
      }, 3000);

      var t2=setInterval(function() {
        debugger
        if(n--==0) clearInterval(t2);
        else document.getElementById("texto").innerHTML=n+"";
      }, 1000);

    }

    function bro() {
      document.getElementById('bro').style.visibility = "hidden";
      document.getElementById('texto').style.display = "none";
      document.querySelector('[name="block"]').style.display = "none";
    }
  </script>
</body>

【讨论】：

我添加了一个包含完整示例的部分，它已经解决了您的解决方案的问题。你可以检查一下:)

【解决方案3】：

您的代码有几个问题。

set 的属性是什么？
几乎每次都会执行您的 setTimeout。
您需要做的是使用一整秒的 setTimeout 并检查当前循环，如果匹配 n，则显示关闭按钮。

我对您的代码进行了一些重构，看起来或多或少是这样的：

let n = 3;
let c = 0; // counter

const hideAll = () => { 
  hide(document.getElementById('texto'));
  hide(document.getElementById('bro'));
  hide(document.getElementById('block'));
}

const show = (el) => el.classList.remove('hidden');
const hide = (el) => el.classList.add('hidden');

const showPopup = () => { 
  show(document.getElementById('block'));
  startCountingDown();
}

const startCountingDown = () => setTimeout( countdown,  1000 );

const countdown = () => { 
  if(c < n) { 
    c++;
    let texto = document.getElementById('texto');
    texto.innerHTML = c.toString();
    show(texto);
    startCountingDown();
  } else { 
    show(document.getElementById('bro'));
  }
}

showPopup();

.hidden { display: none; }
#bro {
  position: absolute;
  left: 50px;
  top: 150px;
  /*visibility: hidden;*/
  justify-content: center;
  z-index: 3;
  font-size: 20px;
}

#texto {
  position: absolute;
  justify-content: center;
  transition: none;
  background-color: inherit;
  padding: inherit;
  z-index: 3;
  color: red;
  font-size: 50px;
  margin-left: 40px;
  margin-top: 25px;
}

aside {
  position: absolute;
  justify-content: center;
  width: 100px;
  height: 100px;
  background-color: blue;
  border-radius: 30px;
  z-index: 2;
}

<p id="texto" class="hidden">1</p>
<button id="bro" onclick="hideAll()" class="hidden">close</button>
<aside name="block" id="block" class="hidden"></aside>

我已经更改了您元素的大小，以便正确地适应此页面。我还创建了一个 .hidden 类，您可以添加或删除它以显示和隐藏您的元素。我相信这是您开始的好方法。

希望对你有帮助

【讨论】：