的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循環不工作

回答

相關問題