Question

我创建了一个JavaScript练习，用于更改HTML对象的ID。

我想设置一个在不同选项之间循环的按钮。现在按钮没有执行该功能。

请查看代码，让我知道我做错了什么。

＆＃13;

a = 0;
n = 1;
i = 0;

function changexc(a, n) {
  document.getElementById('effect00').id = "effect00" + (a + i);
}

function counterxc() {
  i = n++;
  return n;
}


document.write("<br>" + "a is " + a + "<br>");

document.write(" i is " + i + "<br>");

document.write(" n is " + n + "<br>");

document.write(" n + a is " + (n + a) + "<br>");



changexc(a);

＆＃13;

<style>#effect001 {
  max-width: 100px!important;
  height: 200px;
  background-color: red;
  display: block;
}

#effect002 {
  max-width: 200px!important;
  height: 100px;
  background-color: blue;
  display: block;
}

#effect003 {
  max-width: 300px!important;
  height: 300px;
  border-radius: 50%;
  background-color: yellow;
  display: block;
}

</style>

＆＃13;

<div id="effect00"></div>

<button type="button" id="thatdarnbutton" onclick="counterxc ()">Click Me</button>

＆＃13;

Answer 1

此代码有效 - 请参阅下面的说明

var a = 0;
var n = 1;
var i = 0;

function changexc() {
  console.log(" added class : " + "effect00" + (a + i));
  document.getElementById("effect00").className = "effect00" + (a + i);

  console.log("<br>" + "a is " + a + "<br>");

  console.log(" i is " + i + "<br>");

  console.log(" n is " + n + "<br>");

  console.log(" n + a is " + (n + a) + "<br>");




}

function counterxc() {
  i = n + 1;
  n++;
  
  if(n >3) {
    n = 0;
  }
  
  changexc();
}




changexc();

.effect001 {
  max-width: 100px!important;
  height: 200px;
  background-color: red;
  display: block;
}

.effect002 {
  max-width: 200px!important;
  height: 100px;
  background-color: blue;
  display: block;
}

.effect003 {
  max-width: 300px!important;
  height: 200px;
  border-radius: 50%;
  background-color: yellow;
  display: block;
}

<div id="effect00">

  hello world!

</div>

<button type="button" onClick="counterxc();">Click Me</button>

它只是“使用严格”; javascript环境（节点，浏览器等）会假设/说你在声明它们之前不能使用变量，我建议你这样做。它的良好做法：

然而，正如其他人所评论的那样 - 从基础知识开始，了解浏览器如何使用javascript以及节点等其他环境。我仍然习惯于新的ES6和ES7语法以及所有新的构建系统。它在这里提到了很多，但我会推荐“你不懂JS”系列书籍

Answer 2

您的代码工作正常，但需要一点工作。首先，您必须确保在开始工作use setTimeout之前已加载所有元素。看到我在这里修复了你的问题，现在应该可以了

a = 0;
n = 1;
i = 0;
var id = "effect00";

function changexc(a, n) {
  document.getElementById(id).setAttribute("id", "effect00" + (a + i));
  id = "effect00" + (a + i);
}

function counterxc() {
  i = n++;
  write();
  return n;
}

function write() {
  var resultDiv = document.getElementById(id);
  var resultstring = "<br>" + "a is " + a + "<br>"
  resultstring += " i is " + i + "<br>"
  resultstring += " n is " + n + "<br>"
  resultstring += " n + a is " + (n + a) + "<br>"
  resultstring += "id is  " + "effect00" + (a + i);
  resultDiv.innerHTML = resultstring;
  changexc(a)
}

setTimeout(function() { /// this is importent, wait untill elemtns have loaded

  changexc(a);
  write();

}, 100);

#effect001 {
  max-width: 100px!important;
  height: 200px;
  background-color: red;
  display: block;
}

#effect002 {
  max-width: 200px!important;
  height: 100px;
  background-color: blue;
  display: block;
}

#effect003 {
  max-width: 300px!important;
  height: 300px;
  border-radius: 50%;
  background-color: yellow;
  display: block;
}

<button type="button" id="thatdarnbutton" onclick="counterxc()">Click Me</button>

<div id="effect00"></div>

JavaScript问题无法使用HTML标记功能

2 个答案: