HTML/Js/Css - Pick a random element to change color

user_14496231 0
Viewed 147

This is basically (kinda) my first time coding! I'm trying to make an html game to put on a website.

It has 9 boxes, which are blue. And some of those boxes will be orange. Whenever an orange box is clicked, it will turn blue! The task is to make all the boxes blue, as quickly as possible.

When all the boxes are blue, you can click a button to refresh the page, which will give a different pair of orange boxes. I have some code which works, partially.

I cant figure out how to make my code randomly pick some of the boxes, to change them to be orange. (I also haven't made the button to refresh the page). I'm not too good at explaining or coding, but here is what I have so far.

function setColor(e) {
  var target = e.target,
    count = +target.dataset.count;

  target.style.backgroundColor = count === 1 ? "#08AED4" : '#D4A108';
  target.dataset.count = count === 1 ? 0 : 1;

}
#box1 {
  position: relative;
  border-top-left-radius: 80px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box2 {
  position: relative;
  bottom: 10px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box3 {
  position: relative;
  bottom: 20px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 80px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box4 {
  position: relative;
  left: 215px;
  bottom: 678px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box5 {
  position: relative;
  left: 215px;
  bottom: 688px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box6 {
  position: relative;
  left: 215px;
  bottom: 698px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box7 {
  position: relative;
  left: 430px;
  bottom: 1355px;
  border-top-left-radius: 25px;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box8 {
  position: relative;
  left: 430px;
  bottom: 1366px;
  border-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}

#box9 {
  position: relative;
  left: 430px;
  bottom: 1377px;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 80px;
  border-bottom-left-radius: 25px;
  background-color: cyan;
  width: 200px;
  height: 200px;
  border: 5px solid grey;
}
<p type="button" id="box1" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box2" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box3" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box4" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box5" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box6" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box7" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box8" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>
<p type="button" id="box9" style="color: white; background-color: rgb(8, 174, 212);" onclick="setColor(event)" ;="" data-count="0">
</p>

box colors css html javascript
1 Answers

you can use this function (for one box) and repeat it in a loop for more orange boxes

function selectBoxes() {

        var box1 = document.getElementById('box1'); //storing boxen in variables
        var box2 = document.getElementById('box2');
        var box3 = document.getElementById('box3');
        var box4 = document.getElementById('box4');
        var box5 = document.getElementById('box5');
        var box6 = document.getElementById('box6');
        var box7 = document.getElementById('box7');
        var box8 = document.getElementById('box8'); 
        var box9 = document.getElementById('box9');
        
        var boxes = [];
        boxes.push(box1, box2, box3, box4, box5, box6, box7, box8, box9); //putting boxes in an array
        console.log(boxes);
        
        
        var boxToChangeNum = Math.floor(Math.random() * 9); //random number from 0 to 8
        boxes[boxToChangeNum].style.backgroundColor = "#D4A108"; //changing style of the selected box

    }
user_144824490
Related