Question

<!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>";行拒绝投放

Answer 1

您有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>

innerHTML循环不起作用

1 个答案: