Question

您好我正在尝试进行一项基本测验，并且已经陷入了我确信这是一个愚蠢的问题，但由于我只是javascript的新手，我正在努力解决这个问题。

我有一个数组可以解决我的问题，我有一个for循环，我想用它循环遍历数组中的每个元素。在每次迭代中，我希望将数组的那个槽中的问题发布到不同的div。

我已经提前将div作为quest0，quest1等等，每个插槽对应一个数组。但我没有成功发布所有10个样本问题。

var quizQuestions = new Array("Sample question 1","Sample question 2","Sample question 3","Sample question 4","Sample question 5","Sample question 6","Sample question 7","Sample question 8","Sample question 9","Sample question 10");

function questionMe(){
for(i=0;i<10;i++){
  //var testvar = quizQuestions[i];
  document.getElementById("quest"+i).innerHTML = document.write(quizQuestions[i] + "<br>");
  //document.getElementById("quest"+i).innerHTML = testvar;  
}
}

我使用body onload调用函数，除了div（quest0，quest1等）之外，其他任何东西都填充了。

我尝试了两种单独的发布方法：document.write方法，并尝试使用getElementById发布变量，但我没有运气来解决我的问题。

我不确定我是否在发布方法上犯了错误，或者我是否一直在使用（或“quest”+ i），或者甚至完全是其他的。

我恐怕只是看不出我在哪里出错了，我真的很感激一些新鲜而且知识渊博的眼睛为我瞥了一眼。

提前致谢。

Answer 1

无需使用document.write()。。。使用innerHTML会自动将文字添加到<div>。尝试将其更改为：

document.getElementById("quest" + i).innerHTML = quizQuestions[i] + "<br>";

另外，对于您的for，请注意：

for(i=0; i<quizQuestions.length; i++) {

这样，如果数组的长度发生变化，则无需更改代码。

注意：如果仍然无效，请将您的HTML和其余JS添加到您的问题中，以便我们可以看到它。。。它可能是如何编码的问题。

Answer 2

问题可能在于您的初始标记。我假设你创建了这样的div：

<div id="questN" />

这不起作用*，你应该用它替换它：

<div id="questN"></div>

示例：

HTML：

<body>
  <div id="quest0"></div>
  <div id="quest1"></div>
  <div id="quest2"></div>
  <div id="quest3"></div>
  <div id="quest4"></div>
  <div id="quest5"></div>
  <div id="quest6"></div>
  <div id="quest7"></div>
  <div id="quest8"></div>
  <div id="quest9"></div>
</body>

JavaScript的：

var quizQuestions = ["Sample question 1","Sample question 2","Sample question 3","Sample question 4","Sample question 5","Sample question 6","Sample question 7","Sample question 8","Sample question 9","Sample question 10"];

function questionMe(){
  for(var i=0;i<10;i++){
    document.getElementById("quest"+i).innerHTML = quizQuestions[i];
  }
}
questionMe();

DEMO：http://jsbin.com/uROhUJE/1/edit

PS：document.write中有一个非常好的选择时，请不要使用innerHTML。

*）DIV不是自闭元素，因此问题是第一个div在必须关闭之前不会关闭（直到BODY标记关闭）。因此，您的第一个div包含第二个div，其中包含第三个等等。当您更改第一个div的innerHTML时，您将覆盖所有其他div，因此document.getElementById(div#2)返回null。

http://www.w3.org/TR/html-markup/div.html#div-tags

Answer 3

您可以使用jQuery将文本添加到各个div中 id应该几乎相同，所以你可以使用相同的for循环来找到div并添加正确的文本。

$("#divId-"+i).text(array[i]);

或者您可以使用document.getElementsByName来获取具有相同名称字段的所有div。然后迭代所有这些并添加文本。

Answer 4

这是demo

Javascript：

var quizQuestions = ["Question1","Question2"];
for (var i in quizQuestions) {
    var newElement = document.createElement('div');
    newElement.id = quizQuestions[i]; 
    newElement.className = "quiz";
    newElement.innerHTML = quizQuestions[i];
    document.body.appendChild(newElement);
}

CSS：

    .quiz {
        font-family     : Arial;
        text-align      : center;
        width           : 100px;
        height          : 15px;
        background      : #ccc;
        border          : 1px solid #000;
        box-shadow      : 1px 1px 5px -1px #000;
        padding         : 10px;
        margin-bottom   : 10px;
        cursor          : pointer;
     }

使用for循环将数组元素发布到不同的div

4 个答案: