Javascript document.images.length returning 0

Javascript document.images.length returning 0

本文关键字：returning length images document Javascript      更新时间：2024-03-27

我正试图将类名为tile的所有图像都放入一个名为tiles的数组中。我尝试了一些方法，但它总是给我0个长度的数组/节点列表。

我做错了什么？

for(var i =0; i<document.images.length; i++){
    var thumb = document.images[i]
    if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
        tiles.push(thumb);
}

我也试过

var allInputs = document.getElementsByTagName("img");
for(var i =0; i<allInputs.length; i++){
    if(allInputs[i].className == "tile" tiles.push(allInputs[i]);
}

编辑：根据请求，这里是所有的HTML代码。

<body>
<form id="ct" action="">
  <div id="head">
     <img src="kgtitle.jpg" alt="Kiddergarden" />
  </div>
  <div id="menu">
     <img src="kgmenu.jpg" alt="" />
  </div>
  <div id="title">
     <img src="ctitle.jpg" alt="Matching Game" />
  </div>
  <div id="board">
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <br />
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <br />
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <br />
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
  </div>

  <div id="main">
     <p>Play the Concentration game! Click the tiles on the left and
        match pairs of identical images.
        <br /><br />
        Click the <b>Reload Tiles</b>
        button below to randomize the position of the tiles and play
        again.
        <br /><br />
        Click the <b>Show Tiles</b> button to view the
        solution.
     </p>
  </div>
  <div id="controls">
     <p>
        <input type="button" value="Reload Tiles" id="reload" />
        <input type="button" value="Show Tiles" id="showAll" />
     </p>
  </div>
  <address>
     Kiddergarden &#183;
     A safe site on the Web for kids and families
  </address>

这是我的全部javascript代码

function addEvent(object, evName, fnName, cap) {
if (object.attachEvent)
    object.attachEvent("on" + evName, fnName);
else if (object.addEventListener)
    object.addEventListener(evName, fnName, cap);
}
function randomSort(arr) {
arr.sort(function () {
    return 0.5 - Math.random();
});
}
function setOpacity(object, value) {

// Apply the opacity value for IE and non-IE browsers
object.style.filter = "alpha(opacity = " + value + ")";
object.style.opacity = value/100;
}
var flipCount = 0;
var firstFlip;
var secondFlip;
addEvent(window, "load", setupTiles(),false);
function setupTiles() {
var tiles = new Array();
alert(document.getElementsByTagName('img').length);
for(var i =0; i<document.getElementsByTagName("img").length; i++){
    var thumb = document.getElementsByTagName("img");
    thumb = thumb[i];
    if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
        tiles.push(thumb);
}

var tileImages = new Array(tiles.length);
for(var j = 0; i < tileImages.length/2; j++){
    tileImages[j] = new Image("tileimage"+j+".jpg");
}
for(var k = tileImages.length/2; i<tileImages.length;k++){
    tileImages[k] = new Image("tileimage"+(i-tileImages.length)+".jpg");
}
randomSort(tileImages);
for(var l =0; i<tiles.length;l++){
    tiles[l].image = tileImages[l];
    tiles[l].onclick = flipTile;
}
/*document.getElementById("showAll").onclick = function () {
 for(var i =0; i<tiles.length;i++){
 tiles[i].src = tiles[i].image.src;
 }
 }
 document.getElementById("reload").onclick = function () {
 location.reload();
 }*/
}
function flipTable(){
if(flipCount == 0){
    this.src = this.image.src;
    firstFlip = this;
    flipCount++;
}
else if(flipCount == 1){
    this.src = this.image.src;
    secondFlip = this;
    flipCount++;
    checkTiles();
}
return false;
}
function checkTiles() {
if(firstFlip.image.src != secondFlip.image.src){
    flipBack();
}
else{
    flipCount=0;
    firstFlip.opacity = 0.70;
    firstFlip.style.filter = "alpha(opacity= 70)";
    firstFlip.onclick = function () {
        return false;
    }
    secondFlip.opacity = 0.70;
    secondFlip.style.filter = "alpha(opacity= 70)";
    secondFlip.onclick = function () {
        return false;
    }
}
}
function flipBack() {
firstFlip.src = "tile.jpg";
secondFlip.src = "tile.jpg";
flipCount = 0;
}

你的脚本很好，我刚刚测试过。它可能会返回0，因为你把脚本添加到了文件的顶部，只需确保最后添加：

<html>
   <body>
     <div id="board">
        <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
        <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
        <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
        <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     </div>
   </body>
   <script>
      var tiles = [];
      for(var i =0; i<document.images.length; i++){
         var thumb = document.images[i]
         if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
            tiles.push(thumb);
      }
      alert(tiles.length)
   </script>
</html>

至少是我能找到的返回0的唯一原因。如果它解决了你的问题，请告诉我。

如果您从不同的文件导入脚本，只需在末尾添加导入即可，如下所示：

<html>
   <body>
     <div id="board">
        <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
        <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
        <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
        <a href="#"><img src="tile.jpg" class="tile" alt="" /></a>
     </div>
   </body>
   <script src="myscript.js"></script>
</html>

第三种选择是将代码添加到文档就绪侦听器上的函数中：

   document.addEventListener("DOMContentLoaded", function(event) { 
      var tiles = [];
      for(var i =0; i<document.images.length; i++){
         var thumb = document.images[i]
         if(thumb.className == "tile" && thumb.parentNode.tagName == "A")
            tiles.push(thumb);
      }
      alert(tiles.length)
  });
相关文章：