Hello, I'm currently working on a project that involves a simple balloon game. However, I am facing some challenges with modifications. To illustrate, let me provide a basic example using <ul> and <li>.
<ul class="balloons">
<li class="image1" id="b_1">1</li> <!-- it can be any class, but I do not want it to be added at the beginning -->
<li class="image4" id="b_2">2</li>
<li class="image5" id="b_3">3</li>
<li class="image3" id="b_4">4</li>
<li id="b_5">5</li>
<li id="b_6">6</li>
<li class="image2" id="b_7">7</li>
<li id="b_8">8</li> <!-- are there any possibilities to add after this? -->
<li id="b_9">9</li>
<li id="b_10">10</li>
<li id="b_11">11</li>
<li id="b_12">12</li>
<li id="b_13">13</li>
<li id="b_14">14</li>
</ul>
<script>
$(document).ready(function(){
var size_balloon = $(".balloons li").size();
var images = ["", "image1", "image2", "image3", "image4", "image5"];
for (i = 1; i <= 5; i++){
var random_balloon = Math.floor((Math.random() * size_balloon));
//var random_balloon = random_balloon + 1;
var chosen_balloon = $('#b_' + random_balloon);
//chosen_balloon.addClass('pwb');
chosen_balloon.addClass(images[i]);
}
});
</script>
This code randomly adds classes, sometimes at the very beginning, which is not desired. Can anyone offer assistance with this issue?