Function 没有全局变量就不能工作？

Question

我知道这可能是一个非常新手的问题，但我似乎无法在任何地方在线找到答案，我不明白为什么会发生这种情况。 所以，冒着被否决的风险......我希望在这里找到答案。

我几乎可以让我的代码按我的意愿工作，但我不想使用任何全局变量。 但是，每当我将此变量放入我的任何 function 时，代码就会停止工作。

我将不胜感激。 对不起，如果这个问题已经被问了一千次。 他们以我理解全局/本地绑定的方式 - 这不应该发生吗？

这是我的代码，无论我试图将变量放在哪里，而不是在 function 的顶部，都带有注释。

提前致谢。

<body>

    <div class="style" onclick="typeWriter()">
      <p id="remove">Hide Me</p>
      <p id="type"></p>
  </div>
</body>

//Javascript

  let letCounter = 0; //Do not want this as a global variable


  function hideInitText() {
    let hide = document.getElementById("remove");
    hide.classList.add("hide");
    //let letCounter = 0; //I tried here
  }
  hideInitText();

  function typeWriter() {
    //let letCounter = 0; //I tried here

    let cycle, classCounter; //establish the cycle and counter
    cycle = document.querySelectorAll("#type"); //cycle includes the .type class
    for (classCounter = 0; classCounter < cycle.length; classCounter++) { //for loop that actually cycles
      //let letCounter = 0; //I tried here
      typeOut();
    }

    function typeOut() {
      //let letCounter = 0; //I tried here
      let speed = 50; //speed in milliseconds
      let typewriter = "Type me out"; //document.querySelectorAll(".type");
      if (letCounter < typewriter.length) {
        //let letCounter = 0; //I tried here
        //hide.classList.remove("hide"); //unhide the text
        cycle[classCounter].innerHTML += typewriter.charAt(letCounter);
        letCounter++;
        setTimeout(typeWriter, speed);
      }
    }
  };

Answer 1

一个问题是

<div class="style" onclick="typeWriter()">

内联处理程序将要求引用的 function 是全局的（或在某些范围内with不应使用）。 您需要改为使用 Javascript 附加事件侦听器。

document.querySelector('div').addEventListener('click', typeWriter);

如果您希望letCounter仅适用于您的脚本，您可以将它（以及其他所有内容）放在 IIFE 中。 这样， letCounter 的letCounter被限制在您的模块中，并且不是全局的：

 (() => { let letCounter = 0; function hideInitText() { let hide = document.getElementById("remove"); hide.classList.add("hide"); } hideInitText(); function typeWriter() { let cycle, classCounter; //establish the cycle and counter cycle = document.querySelectorAll("#type"); //cycle includes the.type class for (classCounter = 0; classCounter < cycle.length; classCounter++) { //for loop that actually cycles typeOut(); } function typeOut() { let speed = 50; //speed in milliseconds let typewriter = "Type me out"; //document.querySelectorAll(".type"); if (letCounter < typewriter.length) { //hide.classList.remove("hide"); //unhide the text cycle[classCounter].innerHTML += typewriter.charAt(letCounter); letCounter++; setTimeout(typeWriter, speed); } } } document.querySelector('div').addEventListener('click', typeWriter); })();

 <div class="style"> <p id="remove">Hide Me</p> <p id="type"></p> </div>

It looks like the letCounter variable is only being used inside the typeWriter function, so you could go further and scope letCounter to only inside that function. （毕竟，尽可能约束变量 scope 通常是个好主意）

 (() => { function hideInitText() { let hide = document.getElementById("remove"); hide.classList.add("hide"); } hideInitText(); const typeWriter = (() => { let letCounter = 0; return () => { let cycle, classCounter; //establish the cycle and counter cycle = document.querySelectorAll("#type"); //cycle includes the.type class for (classCounter = 0; classCounter < cycle.length; classCounter++) { //for loop that actually cycles typeOut(); } function typeOut() { let speed = 50; //speed in milliseconds let typewriter = "Type me out"; //document.querySelectorAll(".type"); if (letCounter < typewriter.length) { //hide.classList.remove("hide"); //unhide the text cycle[classCounter].innerHTML += typewriter.charAt(letCounter); letCounter++; setTimeout(typeWriter, speed); } } }; })(); document.querySelector('div').addEventListener('click', typeWriter); })();

 <div class="style"> <p id="remove">Hide Me</p> <p id="type"></p> </div>

Answer 2

函数需要一个全局变量，用于您正在执行的场景，您希望每次都增加值。

更复杂的解决方案是更改 html 中名为“value”的属性，并在每次将其视为全局变量时对其进行读取和设置。

Answer 3

您可以像这样将 letCounter 添加到 DOM 中

 const element = document.getElementById('counter'); let letCounter = element.dataset.count;

 <div id="counter" data-count="0"></div>

我不喜欢使用 onclick="" 方法调用，所以我更喜欢使用 on eventListener。

Function 没有全局变量就不能工作？

问题描述

3 个解决方案

解决方案1
2 已采纳 2019-11-20 04:11:25

解决方案2
1 2019-11-20 04:11:03

解决方案3
1 2019-11-20 04:25:37

Function 没有全局变量就不能工作？

问题描述

3 个解决方案

解决方案1 2 已采纳 2019-11-20 04:11:25

解决方案2 1 2019-11-20 04:11:03

解决方案3 1 2019-11-20 04:25:37

解决方案1
2 已采纳 2019-11-20 04:11:25

解决方案2
1 2019-11-20 04:11:03

解决方案3
1 2019-11-20 04:25:37