<!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(){
createimages();
}
function createimages(){
var n = createScrambledArray(16);
var img = ["chicken-icon","crab-icon","dolphin-icon","gold-fish-icon","horse-icon","octopus-icon","rabbit-icon","turtle-icon"];
var element = document.getElementsByClassName("box");
for(var i = 0; i<n.length; i++){
element.innerHTML = "<p>Test</p>";
}
}
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){
var element = document.getElementsByClassName("box");
var getelement = document.getElementsByClassName("hide");
}
</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>";拒绝工作的线路
你有 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(){
createimages();
}
function createimages(){
var n = createScrambledArray(16);
var img = ["chicken-icon","crab-icon","dolphin-icon","gold-fish-icon","horse-icon","octopus-icon","rabbit-icon","turtle-icon"];
var element = document.getElementsByClassName("box");
for(var i = 0; i<n.length; i++){
element[i].innerHTML = "<p>Test</p>";
}
}
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){
var element = document.getElementsByClassName("box");
var getelement = document.getElementsByClassName("hide");
}
</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>