的innerHTML循环不工作

-1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>Untitled Document</title> 
 
</head> 
 

 

 
<!-- Style Sheet --> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<!-- Style Sheet --> 
 

 

 

 
<script> 
 

 
window.onload = function(){ 
 
\t createimages(); 
 
\t } 
 

 
function createimages(){ 
 
\t var n = createScrambledArray(16); 
 
\t var img = ["chicken-icon","crab-icon","dolphin-icon","gold-fish-icon","horse-icon","octopus-icon","rabbit-icon","turtle-icon"]; 
 
\t var element = document.getElementsByClassName("box"); 
 
\t for(var i = 0; i<n.length; i++){ 
 
\t \t element.innerHTML = "<p>Test</p>"; 
 
\t } 
 
} 
 

 
function createScrambledArray(n) { 
 
    var num = [n]; 
 

 
    for (var i = 0; i < n; i++) { 
 
     var temp = Math.floor(Math.random() * n); 
 
     while (num.indexOf(temp) >= 0) { 
 
      temp = Math.floor(Math.random() * n); 
 
     } 
 
     nums.push(temp); 
 
    } 
 
    return nums; 
 
} 
 

 
function clickhandler(x){ 
 
\t var element = document.getElementsByClassName("box"); 
 
\t var getelement = document.getElementsByClassName("hide"); 
 
\t 
 
} 
 

 
</script> 
 

 
<body> 
 

 
<h1>MATCHING GAME </h1> 
 

 
<div class="container"> 
 
    <div class="box spacing" onclick="clickhandler(0)"></div> 
 
    <div class="box spacing" onclick="clickhandler(1)"></div> 
 
    <div class="box spacing" onclick="clickhandler(2)"></div> 
 
    <div class="box" onclick="clickhandler(3)"></div> 
 
    
 
    <div class="box spacing" onclick="clickhandler(4)"></div> 
 
    <div class="box spacing" onclick="clickhandler(5)"></div> 
 
    <div class="box spacing" onclick="clickhandler(6)"></div> 
 
    <div class="box" onclick="clickhandler(7)"></div> 
 
    
 
    <div class="box spacing" onclick="clickhandler(8)"></div> 
 
    <div class="box spacing" onclick="clickhandler(9)"></div> 
 
    <div class="box spacing" onclick="clickhandler(10)"></div> 
 
    <div class="box" onclick="clickhandler(11)"></div> 
 

 
    <div class="box spacing" onclick="clickhandler(12)"></div> 
 
    <div class="box spacing" onclick="clickhandler(13)"></div> 
 
    <div class="box spacing" onclick="clickhandler(14)"></div> 
 
    <div class="box" onclick="clickhandler(15)"></div> 
 
</div> 
 

 

 
</body> 
 
</html>

很简单，愚蠢的错误问题。

显然我得到了一个问题，不能把新的元素放在我的容器（盒）里面的div中，所以我不确定这是命名问题还是所有问题。

线element.innerHTML = "<p>Test</p>";拒绝工作

来源

2015-10-14 LonerHero

*未捕获的ReferenceError：NUMS没有定义* – Quentin

我建议你学习如何格式化SO职位（即可使用back-ticks来格式化句子中的代码，并“保护”HTML标签），并且还可以校对您的帖子。另外，我建议你学习如何调试你的程序，至少学习如何查看控制台的错误。最后，不需要包含''和其他样板，因为它与问题无关。 – 2015-10-14 10:37:15

你有2个错误：nums是不是你定义的数组。它应该是num。

此外，你的循环应该是这样的：

for(var i = 0; i<n.length; i++){ 
     element[i].innerHTML = "<p>Test</p>"; //Since element is a collection 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>Untitled Document</title> 
 
</head> 
 

 

 
<!-- Style Sheet --> 
 
<link rel="stylesheet" type="text/css" href="style.css"> 
 
<!-- Style Sheet --> 
 

 

 

 
<script> 
 

 
window.onload = function(){ 
 
\t createimages(); 
 
\t } 
 

 
function createimages(){ 
 
\t var n = createScrambledArray(16); 
 
\t var img = ["chicken-icon","crab-icon","dolphin-icon","gold-fish-icon","horse-icon","octopus-icon","rabbit-icon","turtle-icon"]; 
 
\t var element = document.getElementsByClassName("box"); 
 
\t for(var i = 0; i<n.length; i++){ 
 
\t \t element[i].innerHTML = "<p>Test</p>"; 
 
\t } 
 
} 
 

 
function createScrambledArray(n) { 
 
    var num = [n]; 
 

 
    for (var i = 0; i < n; i++) { 
 
     var temp = Math.floor(Math.random() * n); 
 
     while (num.indexOf(temp) >= 0) { 
 
      temp = Math.floor(Math.random() * n); 
 
     } 
 
     num.push(temp); 
 
    } 
 
    console.log(num); 
 
    return num; 
 
} 
 

 
function clickhandler(x){ 
 
\t var element = document.getElementsByClassName("box"); 
 
\t var getelement = document.getElementsByClassName("hide"); 
 
\t 
 
} 
 

 
</script> 
 

 
<body> 
 

 
<h1>MATCHING GAME </h1> 
 

 
<div class="container"> 
 
    <div class="box spacing" onclick="clickhandler(0)"></div> 
 
    <div class="box spacing" onclick="clickhandler(1)"></div> 
 
    <div class="box spacing" onclick="clickhandler(2)"></div> 
 
    <div class="box" onclick="clickhandler(3)"></div> 
 
    
 
    <div class="box spacing" onclick="clickhandler(4)"></div> 
 
    <div class="box spacing" onclick="clickhandler(5)"></div> 
 
    <div class="box spacing" onclick="clickhandler(6)"></div> 
 
    <div class="box" onclick="clickhandler(7)"></div> 
 
    
 
    <div class="box spacing" onclick="clickhandler(8)"></div> 
 
    <div class="box spacing" onclick="clickhandler(9)"></div> 
 
    <div class="box spacing" onclick="clickhandler(10)"></div> 
 
    <div class="box" onclick="clickhandler(11)"></div> 
 

 
    <div class="box spacing" onclick="clickhandler(12)"></div> 
 
    <div class="box spacing" onclick="clickhandler(13)"></div> 
 
    <div class="box spacing" onclick="clickhandler(14)"></div> 
 
    <div class="box" onclick="clickhandler(15)"></div> 
 
</div> 
 

 

 
</body> 
 
</html>

来源

2015-10-14 09:58:49

非常感谢您的答复！ – LonerHero

谢谢！您可以接受答案，以便这个问题不会保持开放 –

即使答案被接受，问题仍然存在。 – 2015-10-14 10:34:15

的innerHTML循环不工作

回答

相关问题