Verwenden einer For-Schleife zum Festlegen von Hintergrundbildern mit Javascript

Ich versuche Hintergrund URL aller Kacheln auf den Namen im Speicher-Array festlegen.Verwenden einer For-Schleife zum Festlegen von Hintergrundbildern mit Javascript

Ich habe versucht:

document.getElementById('tile_' + i).style.background = 'url(' + memory_array[i] + ') no-repeat';;

Aber das funktioniert nicht!

Ich war nicht sicher, was die Arrays Namen als ... Ich denke, url(img.gif) ist richtig?

var memory_array = ['url(img1.gif)', 'img1.gif', 'img2.gif', 'img2.gif', 'img3.gif', 'img3.gif', 'img4.gif', 'img4.gif', 'img5', 'img5']; 
 
var memory_values = []; 
 
var memory_tile_ids = []; 
 
var tiles_flipped = 0; 
 

 
Array.prototype.memory_tile_shuffle = function() { 
 
    var i = this.length, 
 
    j, temp; 
 
    while (--i > 0) { 
 
    j = Math.floor(Math.random() * (i + 1)); 
 
    temp = this[j]; 
 
    this[j] = this[i]; 
 
    this[i] = temp; 
 

 
    } 
 
} 
 

 
function newBoard() { 
 
    tiles_flipped = 0; 
 
    var output = ''; 
 
    memory_array.memory_tile_shuffle(); 
 
    for (var i = 0; i < memory_array.length; i++) { 
 
    output += '<div id="tile_' + i + '" onclick="memoryFlipTile(this,\'' + memory_array[i] + '\')"></div>'; 
 

 

 
    } 
 
    document.getElementById('memory_board').innerHTML = output; 
 
    
 
    // This is the relevant line 
 
    document.getElementById('tile_' + i).style.background = 'url(' + memory_array[i] + ') no-repeat'; 
 
} 
 

 
function memoryFlipTile(tile, val) { 
 
    if (tile.innerHTML == "" && memory_values.length < 2) { 
 
    tile.style.background = 'url(qm.gif) no-repeat'; 
 
    tile.innerHTML = val; 
 
    if (memory_values.length == 0) { 
 
     memory_values.push(val); 
 
     memory_tile_ids.push(tile.id); 
 
    } else if (memory_values.length == 1) { 
 
     memory_values.push(val); 
 
     memory_tile_ids.push(tile.id); 
 
     if (memory_values[0] == 1) { 
 
     tiles_flipped += 2; 
 
     //Clear both arrays 
 
     memory_values = []; 
 
     memory_tile_ids = []; 
 
     // Check to see if the whole board is cleared 
 
     if (tiles_flipped == memory_array.length) { 
 
      alert("Well done your a smart person ... Can you do it again ?"); 
 
      document.getElementById('memory_board').innerHTML = ""; 
 
      newBoard(); 
 
     } 
 
     } else { 
 
     function flip2back() { 
 
      //Flip the 2 tiles back over 
 
      var tile_1 = document.getElementById(memory_tile_ids[0]); 
 
      var tile_2 = document.getElementById(memory_tile_ids[1]); 
 
      tile_1.style.background = 'url(qm.gif) no-repeat'; 
 
      tile_1.innerHTML = ""; 
 
      tile_2.style.background = 'url(qm.gif) no-repeat'; 
 
      tile_2.innerHTML = ""; 
 
      // Clear both array 
 
      memory_values = []; 
 
      memory_tile_ids = []; 
 
     } 
 
     setTimeout(flip2back, 700); 
 
     } 
 
    } 
 

 

 

 
    } 
 

 

 

 

 
}

div#memory_board { 
 
    background: black; 
 
    border: 1px solid black; 
 
    width: 900px; 
 
    height: 540px; 
 
    padding: 24px; 
 
    margin: 0px auto; 
 
    margin-bottom: 10px; 
 
} 
 
div#memory_board > div { 
 
    background: url(qm.gif) no-repeat; 
 
    background-size: 100% 100%; 
 
    border: 1px solid #fff; 
 
    width: 120px; 
 
    height: 120px; 
 
    float: left; 
 
    margin: 8px; 
 
    padding: 20px; 
 
    font-size: 20px; 
 
    cursor: pointer; 
 
    text-align: center; 
 
    color: white; 
 
    border-radius: 5px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Basic Java</title> 
 
    <link href='style.css' type='text/css' rel='stylesheet' /> 
 
    <script src="java.js"></script> 
 
</head> 
 

 
<body> 
 
    <!--HEADER--> 
 
    <div class='holder header'> 
 
    <h1>Simple picture guessing game</h1> 
 
    </div> 
 
    
 
    <!--Container--> 
 
    <div id='memory_board'> 
 
    <script> 
 
     newBoard(); 
 
    </script> 
 
    <!--Add window.addEventListener() for window load.--> 
 
    </div> 
 

 
    <!--footer--> 
 
    <div class='holder footer'> 
 

 
    </div> 
 
</body> 
 
</html>

Quelle

2016-10-16 user3498054

Haben Sie versucht, 'backgroundImage' wie diese' tile.style.backgroundImage = 'url (qm.gif)'; '? – LGSon

Ihr Snippet return: "Uncaught ReferenceError: newBoard ist nicht definiert" und try'backgroundImage = "url (...)" 'oder nur' background = "url (...)" ' – Arthur

// This is the relevant line

Diese Linie sollte

document.getElementById('tile_' + i).style.background = 'url(' + memory_array[i] + ') no-repeat';

und Ihr Array sollten Sie mit Ihrem imag

var memory_array = ['img1.gif', 'img1.gif', 'img2.gif', 'img2.gif', 'img3.gif', 'img3.gif', 'img4.gif', 'img4.gif', 'img5.gif', 'img5.gif'];

Auch stellen Sie sicher, den Pfad sein es ist richtig

Alternativ können Sie backgroundImage

document.getElementById('tile_' + i).style.backgroundImage = 'url(' + memory_array[i] + ')';

Quelle

2016-10-16 18:47:58 LGSon

Ich habe dies versucht und ich bekomme Die Fehlermeldung kann Eigenschaft "Stil" von Null nicht lesen – user3498054

@ user3498054 Das bedeutet, dass das Element, 'document.getElementById ('tile_' + i)', existiert nicht – LGSon

danke !! Ich lege es in eine andere for-Schleife, nachdem die tile_ is erstellt wurde und funktioniert !! – user3498054

Nur wenige Dinge hier benutzen Sie sich anschauen sollten Sie den Code in newBoard Funktion wie die folgende

function newBoard() { 
    tiles_flipped = 0; 
    var output = ''; 
    memory_array.memory_tile_shuffle(); 
    for (var i = 0; i < memory_array.length; i++) { 
    output += '<div id="tile_' + i + '" onclick="memoryFlipTile(this,\'' + memory_array[i] + '\')"></div>'; 


    } 
    document.getElementById('memory_board').innerHTML = output; 

    // This is the relevant line 
    var title=document.getElementById('tile_' + i); 
var imageUrl=url(memory_array[i] + 'no-repeat'); 
    title.style.backgroundImage = imageUrl; 
}

Bewahren Sie Ihre dom Suche zu ändern in eine Variable und operiere dann mit der Variablen. Beispiel: var title = document.getElementById ('tile_' + i);

hoffe, das hilft

Quelle

2016-10-16 18:56:52 Geeky

Ich bekomme immer den Fehler URL ist nicht definiert – user3498054

Verwenden einer For-Schleife zum Festlegen von Hintergrundbildern mit Javascript

Antwort

Verwandte Themen