Untitled

<!DOCTYPE html>
<html lang="de">
  <head>
    <title>AB10 Aufgabe 1</title>
    <meta charset="utf-8">
<style>
body {
    text-align: center;
}

.button {
    background-color: grey;
    width: 80%;
    height: 100px;
}
</style>

      <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
    <body>

        <form>
            <button type="button" class="button" id="button0">Tap or Click me</button>
            <button type="button" class="button" id="button1">Tap or Click me</button>
            <button type="button" class="button" id="button2">Tap or Click me</button>
        </form>
        <script>

const cbox = document.querySelectorAll(".button");

 for (let i = 0; i < cbox.length; i++) {
     cbox[i].addEventListener("click", function() {
       cbox[i].style.backgroundColor = "red";
     });
     cbox[i].addEventListener("touchstart", function() {
       cbox[i].style.backgroundColor = "#" + Math.floor(Math.random()*16777215).toString(16);
     });
 }

</script>
    </body>
</html>