I want to display only 14 images how can i do that

var table = [ ];
var rows = 10;
var cols = 10;
for(var i = 0; i < rows; i++){
    table[i]=[];
}
document.write('<div class="main">');
for(var i = 0; i < rows; i++){
    for(var j = 0; j < cols; j++){
//document.write(table[i][j] + " ");
document.write('<div class="div_cell">'+ " "+ '</div>');
    }
}
document.write('</div>');

var image = "url('img/img1.jpg')";  /* This is the link to your image. Note how there is a prefix of url with parentheses,
                                    this is because the variable holds the whole CSS background-image value. In css it would be like that:
                                    background-image: url('img/img1.jpg') */

var cellContainer = document.getElementsByClassName("main")[0];
var generatedCells = cellContainer.getElementsByTagName("div");

function fillCells() {  // This is the function called when the button is clicked

    for (c = 0; c < generatedCells.length; c++) {   /* This iteration cleans the cells before anything happens. If that is not done,
                                                    then within every single button click more and more cells will be filled until there's no more space */
        generatedCells[c].style.backgroundImage = "";
    }

    for (i = 0; i < generatedCells.length; i++) {   // This iteration fills random cells
        var randomNumber = Math.round(Math.random() * 1); /* Generates a random floating point number between 0 and 1 and then rounds it up.
                                                            If it's more that 0.5, then it's 1, if it's less than 0.5, then it's 0 */
        if (randomNumber == 1) {
            generatedCells[i].style.backgroundImage = image; // For each div cell you assign a CSS background property with the your image held by the variable called image
        }
    }
}

var button = document.getElementById("button"); // Gets the button and stores it in the variable
button.addEventListener("click", fillCells);    // Calls the fillCells function. Note how you do not use parentheses () when calling a function in an event listener
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Cell and image game</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/style.css">
  </head>
  <body>
    <div id="button">Click on me to fill the cells</div>
    <!-- Always put your script tags just before the body tag closes -->
    <script type="text/javascript" src="js/script.js"></script>
  </body>
</html>
‚Äč
 

Can you post your css too?

body {
  font-family: Tahoma;
}

.div_cell{
  width: 40px;
  height: 40px;
  border:1px solid black;
  float: left;
  background-size: cover;
 }
.main{
  width:439px;
  margin: 0 auto;
}

#button {
  padding: 25px;
  background: #121212;
  color: #fff;
  margin: 0 auto;
  width: 300px;
  text-align: center;
  margin-bottom: 25px;
  transition: all 0.2s ease;
  cursor: pointer;
  /* The code below makes sure you can't select the text inside the button */
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
     -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
          user-select: none; /* Non-prefixed version, currently
                                supported by Chrome and Opera */
}

#button:hover {
  background: gray;
}