0

Hi i found this glorius code while looking for help with my issue of having a click box on the screen that will turn 4 different colours. here is the code i found which is perfect. All i want is to start at yellow, got to amber onlick, go to red on a 2nd click and go to white on the 3rd click

<html>
<body>
<style>
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
.H1toH5 input:checked + .seatButton { background: red; }
</style>
<div class="H1toH5">
  <label>
    <input type="checkbox" />
    <span class="seatButton">H1</span>
  </label>
</body>
</html>

im pretty new to css but its got me hooked atm! Any help is appreicated

112StaminaX
  • 1
  • 3

1 Answers1

0

You can achieve this functionality simply by using JavaScript.

<!DOCTYPE html>
<html>
<body>
<style>
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; background: yellow; }
</style>
<div class="H1toH5">
  <label>
    <input type="checkbox" />
    <span id = "myButton" class="seatButton">H1</span>
  </label>
</body>
<script>
let button = document.getElementById("myButton");
let counter = 1;

button.addEventListener("click", function() {
    if (counter == 1) {
        button.style.background = "#FFBF00";
    } else if (counter == 2) {
        button.style.background = "red";
    } else if (counter == 3) {
        button.style.background = "white";
    } else if (counter == 4) {
        button.style.background = "yellow";
        counter = 0;
    }
    
    counter++;
});
</script>
</html>

Updated Part

You can do this with any number of colours. Just make a dictionary with key/value pairs, where the key is the index and the value is the colour.

Something like this

let myDictionary = {
    1: "red",
    2: "yellow",
    ...
};

Here's the code for 32 colours.

<!DOCTYPE html>
<html>
<body>
<style>
.H1toH5 input { display: none; }
.H1toH5 .seatButton { padding: 5px; border: 1px solid #ccc; color: #FFFFFF; background: #264653; }
</style>
<div class="H1toH5">
  <label>
    <input type="checkbox" />
    <span id = "myButton" class="seatButton">1</span>
  </label>
</body>
<script>
let button = document.getElementById("myButton");
let counter = 2;
let colors = {
    1: "#264653",
    2: "#2a9d8f",
    3: "#e9c46a",
    4: "#f4a261",
    5: "#e76f51",
    6: "#ffcdb2",
    7: "#ffb4a2",
    8: "#e5989b",
    9: "#b5838d",
    10: "#6d6875",
    11: "#e63946",
    12: "#f1faee",
    13: "#a8dadc",
    14: "#457b9d",
    15: "#1d3557",
    16: "#14213d",
    17: "#fca311",
    18: "#e5e5e5",
    19: "#003049",
    20: "#d62828",
    21: "#fcbf49",
    22: "#cdb4db",
    23: "#ffc8dd",
    24: "#ffafcc",
    25: "#bde0fe",
    26: "#a2d2ff",
    27: "#ef476f",
    28: "#ffd166",
    29: "#06d6a0",
    30: "#e09f3e",
    31: "#540b0e",
    32: "#4a4e69",
}

button.addEventListener("click", function() {
    button.style.background = colors[counter]; // Updating the colour
    button.textContent = counter; // Updating the text inside the span tag.
    
    // When we reach the last index, or the colour, then reset the counter to zero to start from the beginning.
    if (counter == 32) {
        counter = 0;
    }
    
    counter++;
});
</script>
</html>
Vaibhav
  • 562
  • 5
  • 12