I just started school, and this is my first question ever asked on Stackoverflow, so I apologize up front regarding both formatting and wording of this question.

I want to change the border color of my div to a style I have already declared when I click on it. To show that this has been selected.

I have three divs with id="red/green/pink".

Now, is there a way to change this function to grab information from the div I clicked, so I dont have to write 3 (almost) identical functions?

```
.chosenBorder{
border: 3px solid gold;
}

<div id="red" class="mainDivs" onclick="newColor('red')">Red?</div>
<div id="green" class="mainDivs" onclick="newColor('green')">Green?</div>
<div id="pink" class="mainDivs" onclick="newColor('pink')">Pink?</div>
<div class="mainDivs" onclick="whatNow(changeBig)">Choose!</div>

<script>
  let changeBig = "";
  let chosenDiv = document.getElementById("body");

  function newColor(thisColor) {
    changeBig = thisColor;
    // something that make this part dynamic.classList.toggle("chosenBorder");
  }

  function whatNow(changeBig) {
    document.body.style.backgroundColor = changeBig;
  }
</script>

```