CODEWITHSUNDEEP
javascripthtmlcss
user3498054
user3498054

Reputation: 1

Using a for loop to set background images using Javascript

I am trying to set background URL of all the tiles to the name in the memory array.

I have tried:

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

But this does not work!

I wasn't sure what to put the arrays names as ... I think url(img.gif) is correct?

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>

Upvotes: 0

Views: 907

Answers (2)

Geeky
Geeky

Reputation: 7488

Few things here you might consider changing the code at newBoard function as the following

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;
}

Always store your dom search into a variable and then operate on the variable. ex: var title=document.getElementById('tile_' + i);

Hope this helps

Upvotes: 0

Asons
Asons

Reputation: 87191

// This is the relevant line

That line should be

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

And your array should be

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

Also make sure the path to your images is correct

Alternatively you can use backgroundImage

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

Upvotes: 1

Related Questions