I currently have a table displayed on my website.
Within the code, there is a while loop that iterates four times and then assigns the weapon class to four random cells, turning them orange as shown in the snippet below.
$(document).ready(function() {
var body = document.getElementsByTagName("body")[0];
var table = document.createElement('TABLE');
var tblB = document.createElement('TBODY');
table.appendChild(tblB);
$("td").addClass('empty');
for (var i = 0; i < 10; i++) {
var tr = document.createElement('TR');
tblB.appendChild(tr);
$(tr).attr('data-x', i)
for (var j = 0; j < 10; j++) {
var td = document.createElement('TD');
tr.appendChild(td);
$(td).attr('data-y', j);
}
}
body.appendChild(table);
var weapons = 0;
while (weapons < 4) {
var randomRow = Math.floor((Math.random() * 9) + 1);
var randomCol = Math.floor((Math.random() * 9) + 1);
var randomCellNew = $($("tr[data-x=" + randomRow + "] > td[data-y=" + randomCol + "]"));
if (randomCellNew.hasClass('empty') === true && randomCellNew.hasClass('dimmed') === false) {
randomCellNew.addClass('weapon').removeClass('empty');
weapons++
}
}
})table td {
padding: 25px;
border: 5px solid red;
background-image: url('image.png');
background-size: 100%;
}
table {
margin: auto;
position: relative;
}
.weapon {
background: orange;
opacity: 0.5;
}
.snowballs {
background-image: url("snowball.png");
background-size: contain;
/* <------ */
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 0 5px 2px yellow;
-moz-box-shadow: 0 0 5px 2px yellow;
box-shadow: 0 0 5px 2px yellow;
position: absolute;
}
.gun {
background-image: url("gun.png");
background-size: contain;
/* <------ */
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 0 5px 2px yellow;
-moz-box-shadow: 0 0 5px 2px yellow;
box-shadow: 0 0 5px 2px yellow;
position: absolute;
}
.nunchucks {
background-image: url("nunchucks.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 0 5px 2px yellow;
-moz-box-shadow: 0 0 5px 2px yellow;
box-shadow: 0 0 5px 2px yellow;
position: absolute;
}
.ninjastar {
background-image: url("ninjastar.png");
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
-webkit-box-shadow: 0 0 5px 2px yellow;
-moz-box-shadow: 0 0 5px 2px yellow;
box-shadow: 0 0 5px 2px yellow;
position: absolute;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Instead of assigning the same class to all cells, I am looking at giving each of four of them unique classes so that they can hold distinct images. The goal would be for the loop to place one of four images into each of the four random cells until all four classes are utilized.
I attempted to use :nth of type in CSS, but it did not produce the desired outcome.
Is there an alternate method available?
One idea I had was to iterate through an array of classes, but I am uncertain about how to implement this.
How can I resolve this challenge while still utilizing the if statement and the randomCellNew variable?
Furthermore, please note that all adjustments should occur upon page load rather than through any additional functions or click events.
If the provided code above does not work correctly, you can access it on https://jsfiddle.net/johnroiste/y2qktb8z/4/