1
Kiremit adında bir dizi içine kiremit sınıfıyla tüm görüntüleri almaya çalışıyorum. Birkaç şey denedim ama bana 0 uzunluk dizileri/nodelists veriyor.Javascript document.images.length dönen 0
Neyi yanlış yapıyorum?
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);
}
Ben de
var allInputs = document.getElementsByTagName("img");
for(var i =0; i<allInputs.length; i++){
if(allInputs[i].className == "tile" tiles.push(allInputs[i]);
}
EDIT denedi: isteği üzerine buraya HTML kodu tümüdür.
<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 ·
A safe site on the Web for kids and families
</address>
Bu Ben sadece test
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;
}
, "sınıf" tek sınıftır? –
Evet, html'deki tek sınıf 'tile' – KWhite
Bize html kodunuzu göstermeniz gerekiyor. – Lewis