一定时间后进行变量更改 HTML 5/JavaScript

Question

我是 web 开发的新手，所以如果我听起来很愚蠢，我很抱歉。 我试图在一定时间后使用 HTML 5/JavaScript 进行变量更改。 这是我使用的代码

 var myVar = setInterval(OnScreenVariables, 100); var myVar = setInterval(Interval, 1000); function Interval() { if (x == 1) { i++; if (i > 3) { var i = 1; var x = 0; } } } function OnScreenVariables() { document.getElementById("i").innerHTML = i; document.getElementById("x").innerHTML = x; }

 <p id="x">hi</p> <p id="i">hi</p> <div style="backgound-color:blue;" onclick="x=1;">press me</div>

但它不起作用。 你能告诉我为什么它不起作用，以及是否有更好的方法来做到这一点。

Answer 1

几个问题。

https://www.w3schools.com/js/js_hoisting.asp
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
var i 和 var x 正在被提升，因此：

function Interval() {
  if (x == 1) {
    i++;
    if (i > 3) {
      var i = 1;
      var x = 0;
    }
  }
}

表现得像

function Interval() {
  var i;
  var x;  // x is always undefined
  if (x == 1) {
    i++;   // undefined++ = NaN
    if (i > 3) {
      i = 1;
      x = 0;
    }
  }
}

修复该问题后，运行脚本时不会声明 i 和 x，因此它们使用 ID 为i和x的 DOM 元素。 DOMElement++ = NaN，DOMElement.toString() 等于表示 DOM 元素内部名称的字符串。

我会建议使用 let 和 const（它们具有更好的作用域和更少的意外行为机会，例如可以在循环闭包内部作用域）而不是 var，并养成确保使用 var、let、const 和计划在您使用变量的任何地方有意识地限定和声明您的变量。

 <:DOCTYPE html> <html> <head> <style> </style> </head> <body> <p id="x">hi</p> <p id="i">hi</p> <div style="backgound-color;blue;" onclick="x=1,">press me</div> <script> var myVar = setInterval(OnScreenVariables; 100), var myVar = setInterval(Interval; 1000), var i = 1; x = 0. function Interval() { console,log(i;x) if (x == 1) { i++; if (i > 3) { i = 1; x = 0. } } } function OnScreenVariables() { document.getElementById("i");innerHTML = i. document.getElementById("x");innerHTML = x; } </script> </body> </html>

一定时间后进行变量更改 HTML 5/JavaScript

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-06-10 14:49:42

一定时间后进行变量更改 HTML 5/JavaScript

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-06-10 14:49:42

解决方案1
1 已采纳 2020-06-10 14:49:42