javascript - 如何检查在一系列随机按钮中单击了哪个按钮？

Question

我有一系列随机按钮，我想知道如何检测点击了哪个按钮，以及当它被点击时，它变成了与该随机按钮相对应的 css 中分类的颜色。

var randomCharacter = '';
var button = document.getElementsByClassName("button");
//gets a random character
function getRandomCharacter(length) {
  var randomResult = '';
  const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
  const charactersLength = characters.length;
  for (var i = 0; i < length; i++) {
    randomResult += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return randomResult;
}

//gives a random image displayed
function giveDifferentQuestionImg() {
  randomCharacter = getRandomCharacter(1);
  // console.log(randomCharacter); // test
  document.canvas.src = "alphabetAndNum/" + randomCharacter + ".png";
  // 3 different characters in 3 times 
  var possibleAns = [getRandomCharacter(1), getRandomCharacter(1), getRandomCharacter(1), randomCharacter];
  shuffleArr(possibleAns);
  document.getElementById("ans1").innerHTML = possibleAns[0];
  document.getElementById("ans2").innerHTML = possibleAns[1];
  document.getElementById("ans3").innerHTML = possibleAns[2];
  document.getElementById("ans4").innerHTML = possibleAns[3];
  //  console.log(randomCharacter)
}

//shuffles array 
function shuffleArr(array) {
  var currentIndex = array.length,
    randomIndex;
  // While there remain elements to shuffle...
  while (0 !== currentIndex) {
    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex--;
    // And swap it with the current element.
    [array[currentIndex], array[randomIndex]] = [
      array[randomIndex], array[currentIndex]
    ];
  }
  return array;
}

//checks for if the user answer is correct 
function selectAnswer(event) {
  //need to know if character selected = randomcharacter var 
  const selectedButton = event.target.innerHTML;
  if (selectedButton == randomCharacter) {
    document.querySelector("button").classList.add("btn-correct")
    document.getElementById("elemental").innerHTML = selectedButton
    console.log(selectedButton, randomCharacter);
  } else {

  }
}

.imgButton {
  text-align: center;
}

table {
  margin-left: auto;
  margin-right: auto;
}

.display-btn {
  padding: 1.5rem;
  border-radius: 2rem !important;
}

#answers-btns {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-row {
  width: 100%
}

#randomPhoto {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.bodyQuiz {
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 10px;
  margin: 20px 0;
}

.btn {
  border-radius: 2rem !important;
  outline: none;
}

.btn-correct {
  background-color: rgb(35, 202, 35);
}

.btn-wrong {
  background-color: rgb(226, 58, 58);
}

.start-btn,
.next-btn {
  font-weight: bold;
}

.controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.hide {
  display: none;
}

<div>
  <img src="" name="canvas" id="randomPhoto" alt="handsign">
</div>

<div id="answer-buttons" class="btn-grid">
  <button class="btn" id="ans1" onclick="selectAnswer(event)">1</button>
  <button class="btn" id="ans2" onclick="selectAnswer(event)">2</button>
  <button class="btn" id="ans3" onclick="selectAnswer(event)">3</button>
  <button class="btn" id="ans4" onclick="selectAnswer(event)">4</button>
</div>

Answer 1

检查这段代码。

<div id="answer-buttons" class="btn-grid">
  <button class="btn" id="ans1" onclick="buttonFunction(this)" value="red">1</button>
  <button class="btn" id="ans2" onclick="buttonFunction(this)" value="yellow">2</button>
  <button class="btn" id="ans3" onclick="buttonFunction(this)" value="black">3</button>
  <button class="btn" id="ans4" onclick="buttonFunction(this)" value="green">4</button>
</div>
</div>
<div style = "width: 100px; height: 100px; border: 1px solid black" id ="gridContent">
</div>
<script>

function buttonFunction(el) {
    var gridContent = document.getElementById("gridContent")
    gridContent.style.backgroundColor = el.value
}